What to read about the architecture of a Vue application?

Question

Software design

Tell me if there are any authoritative sources about designing the architecture of web applications on reactive frameworks, in particular - Vue. Maybe there are books, articles, reports or just diaries of experts? I didn't find anything directly relevant.

Answer 1

I personally would not call myself a particularly big specialist. But I have already written a couple of applications inside and out with Vue.js and it so happened that I created, as far as I know, the first full-fledged plug and play theme for WordPress (that is, without Node.js SSR but with full SEO support, so the user can simply install as a regular theme on your site and use it without any additional work on the site code, which is currently not possible with other existing concepts for WordPress in the Vue.js area).
Self-taught (mainly a 22-hour course by Maximilian Schwarzmüller on Udemy.com) I haven't come across any serious resources with in-depth discussions on the architecture of Vue.js applications. Probably those who are into this are not really sitting on a toaster or stackoverflow :) That's why I personally just adjusted the architecture of my applications to the endpoints of this Backend (Symfony 4 and WordPress). For WordPress, I just organize the components like I would organize a normal WordPress theme:
post.php ---> src/components/main/single/post.vue
index.php ---> src/components/main/lists/posts. vue
front-page.php ---> src/components/main/pages/home.vue
page.php ---> src/components/main/single/page.vue
archive-{custom-post-type}.php ----> src/components/main/lists/{custom-post-type}-posts.vue
I divide the site into parts Main, Header, Footer, (Sidebar if the navigation is not in the Header,) and Modals. (Global) Communication between them happens through Vuex modules. And Vue-Router handles HTTP requests using Axios.
Extensive and numerous methods and hooks (activated, mounted, etc) of one component, I try to transfer as much as possible to Mixins and make them universal for use in other components in order to keep the script tag as clean as possible (when looking for errors, 200-400 lines of script and 10 different between related methods can be a huge pain in the ass).
Just recently came across this guy, whom I liked a couple of articles and the site:
https://markus.oberlehner.net/
Perhaps already in his extensive articles you will find a lot of necessary information. In addition, he is going to release a book on this topic and here you can subscribe to his newsletter (I subscribed and so far no spam, only on the topic):
https://oberlehner.us20.list-manage.com/subscribe?...
And here are a bunch of interesting links that you get when you first search for "Vue.js architecture" (that is, without guarantees on my part):
https://v1.vuejs.org/guide/application.html
https://learn-vuejs .github.io/vue-patterns/useful-...
https://itnext.io/how-to-structure-a-vue-js-projec...
https://dev.to/maxpou/3- tips-for-scaling-large-vue...
This book has a part called "Large Application Patterns with Vuex":
https://www.amazon.de/dp/B01N6VAO4P
This book also seems interesting, more than 200 pages are devoted to Vuex and Vue-Router:
https://www.amazon.de/Fullstack-Vue-Complete-Guide...
And lastly, the most authoritative resources on this and similar topics with VueConf Talks :
https://www.vuemastery.com/conferences/vuejs-amste...
https://www.vuemastery.com/conferences/vueconf-tor...
https://www.vuemastery.com/conferences/vueconf -tor...
https://www.vuemastery.com/conferences/vueconf-tor...
https://www.vuemastery.com/conferences/connect-tec...
https://www.vuemastery.com /conferences/vueconf-us-...
https://www.vuemastery.com/conferences/vueconf-us-...
https://www.vuemastery.com/conferences/vueconf-us-...
https: //www.vuemastery.com/conferences/vueconf-us-...
https://www.vuemastery.com/conferences/vueconf-us-...
https://www.vuemastery.com/conferences/vueconf-us-...
https://www.vuemastery.com/conferences/ vueconf-us-...
https://www.vuemastery.com/conferences/vueconf-us-...
Have fun :)

Answer 2

Official dock.
And authoritative.
And well chewed.

Answer 3

Chik chik
Here, in my opinion, everything is there.
Or free online courses.