[Vuejs]-How to handle Vue "el" pointer with multiple layouts (Laravel MPA)

0👍

I figured out how to handle this.

The Vue instance created in the app.js doesn’t have to be your only instance. In MPA’s you will most like have multiple vue instances, perhaps on per page. To keep my code clean, i kept the dependencies common to my whole application in app.js.

For my portals, each portal has a commons.js which containts dependencies specific to the management of my application and hence dont need to be loaded when the user is surfing my up. I set to bundle with webpack and include in all portal pages.

Furthermore, each page has a page.js which is also bundled and included only page specific dependencies (components etc) and a vue instance for each page.

By using this architecture i reduce the JS needed to be loaded to only the necessary on both portal pages and the main app for users.

Hope this helps someone! Happy coding.

Leave a comment