These days there are two common architectural approaches to modern web app development:
[…]
As I worked with Blade and Vue together, an interesting pattern started to appear. I noticed that for some pages, I was actually already building them as a single Vue component. These were pages that required a lot of JavaScript interaction, or at least needed to live within the scope of a Vue component so that I could hide or show data depending on some state. My server-side templates started looking like this:
[…]
The #app div serves as our root Vue component element. There is nothing fancy about the two data attributes. They simply provide a way for us to get data from our controller to our Vue components.
Next, let's look at our base JavaScript file, which takes care of booting our Vue components.
[…]
Finally, we boot the current page's Vue component. We do this by getting the current component name from our root div, as well as all the data (props) for that component. Then we create a new Vue instance with a custom render function. By doing it this way, we can actually omit the Vue compiler entirely from our app and only use the Vue runtime. This saves us a few kilobytes in our final vendor.js file.
[…]
