How is a SPA application implemented, using Vue.js as an example?

Question

Software design

Good afternoon / evening, dear connoisseurs! I have a lot of questions about SPA... If anyone can answer, I will be very grateful!
1) Vue.js exists to interactively (without reloading the page) display the changed elements on the page, right?
2) I read about Nuxt.js , but I still don't understand what it is for... as I understand it, Nuxt.js exists to write large-scale projects, right?
3) Page generation on the server side... that is, not the entire application is given to the client, but only part of it, right? And if the client goes to some other element (page), then the data for this page comes from the server, right?
4) As far as I understand, all this generation (referring to point 3) can be done on a server (Node.js), right?
5) How does Vue.js interact with the backend? Exactly the same way as in PHP, right?
6) What is Vuex for ?
Sorry for such stupid questions... Thank you!

Answer 1

They gave an answer on another resource, maybe someone will come in handy:
1. Yes, they write on it both simple things and full-fledged SPAs, navigation works without preloading.
2. Nuxt js is an assembly (VueJS + VueRouter etc.) that does server side rendering of SPA applications. Why is he doing this? - everything is very simple. SPA applications are not indexed by search bots due to their asynchrony and JS, NuxtJS solves this problem by rendering on the server side (performs all asynchronous actions such as a REST backend request, and returns the rendered HTML)
3. SSR (server rendering), generates the page that the user requested, for example: example.ru/item/12, in this case, SSR will ask the backend for Item with id = 12 , and then generate and return HTML to the client. At the end of the HTML document, the file of your SPA application is always included, which will be executed and turn on reactivity. Those. It turns out that the first request to the server is a rendered SSR, and all other transitions through the application are already SPA
4. Yes, just install NuxtJS and enjoy the development.
5. Interacts via REST, making GET|POST requests to your backend. Or via socket. Use laravel 5 as backend
6. Vuex is a centralized data store. designed to hard separate data from view. All data is stored in a single instance, and if a set (mutation) occurs for any value in the storage, then in all places where the get of this value was, an update will occur.
This ensures reactivity, the site ceases to be just a page. If you want, he "gains a soul"
Sometimes in simple admin panels I create only one main action that makes the so-called. getAllState i.e. Takes all the state regarding the user from the backend. For example, it takes user, comments, posts objects. Billing, messages and writes it to the repository.
And when I need to update the data, I again call getAllState which will update the store, at this time the getter / setter chain will be automatically called and this is where the vue magic will work. It will compare the current rendered DOM with the New Virtual DOM. And if there are differences somewhere, he will re-render this piece.
It's very difficult to explain this. I hope I was able to convey at least a part of the whole concept.
I think it's not worth talking about the docks. After all, everything that is said above is written there in a more detailed form)
Author: Evgeny Ryumin