How to make the correct (flexible, high-quality) Vue architecture in Laravel?

Question

Laravel

Good afternoon.
Began to understand a bunch of Vue and Laravel. The architecture proposed in the example is only good for an example. Realistically, if this is how it will be used, it will be a mess in files and code, as it seems to me.
For the front, I also want to use bootstrap and its plugins and jQuery
. I'm looking not at singpage, but at a regular application on blade templates, where javascript parts are built from vue components.
How correct is this approach?
Maybe you have good articles or lessons saved on this issue?
I looked at the laracaste, the level is not the same.
How to correctly write a Vue component, just like in the example from Laravel? Or is there a better approach?
Are all components and plugins of Javascripts collected in one file or different somehow?

Answer 1

It is correct to write as in the example from Laravel (Example.vue file).
Although, you can do without Example.vue, and write business logic in app.js.
For example, this friend does just that:
https://www.youtube.com/watch?v=ZEF3TAAzfVM
But, the first option is more correct.
When you start writing like this, you will need to exchange data between different vues.
To do this, use Vuex.
You can watch about it here:
https://www.youtube.com/playlist?list=PL55RiY5tL51...
Otherwise, you are moving in the right direction.
Applications using the Laravel + Vue.js bundle are really cool.
Good luck!

Answer 2

Hello!
Now I am writing an application in conjunction with Vue and Laravel. Initially, I began to use the approach with components in separate files - this is really the right way. Otherwise, as soon as the application grows a little, it will be impossible to manage it.
I also use vue-router and vuex. The concepts are not very complex - over time they will definitely come in handy.
By default, Lara suggests writing in the same way with components that are assembled into the application by the built-in mechanism - Elixir. I went a little different way - I installed webpack with the vue compilation template and began to develop the front as a fundamentally separate application (as here) addressing Lara for data (REST architecture). After compilation, I will connect the front file to Lara's entry point (index.blade.php and id="app" in it) and forward the web route (not API) to the application (as here ).
To be honest, I don't know why I didn't follow the default path - Elixir also monitors and compiles files hot. Probably I wanted to make a completely separated front-back architecture ..