Laravel + Vue.js MPA/SPA hybrid structure suggestions and thoughts.

Posted 9 months ago by Gabotronix

I thought about the following MPA - SPA hybrid, where I basically treat each page as an SPA, but still reloading pages to transit from one page to another (index.blade.php to posts.blade.php) like the habitual MPA. This methods uses laravel routing, session and auth poweful features to render a blade template wich contains a single vue.js component .

Imagine you are at the main page, you will have something like this:

<body id="vue_root">
    <page-index data={{ json encoded data from backend }}></page-index>

As you can see I pass a json object as a prop to vue component, this prop contains all needed data for vue to render.

When using this approach of treating each page as a component I can use vue.js single files to contain all the markup, logic (vue component methods and style) into a single file wich will make it easier for me to test and debug.

I have a single vue.js root instance where I register all page components.

However since I'm using laravel controllers as a backend for retrieving all the data along with blade views I will also have to create vue.js components and laravel blade templates, that sounds like double work to me.

What do yout think of this pattern? is it good? any ideas to improve this, should I use inline-templates instead (that way I would not need to make corresponding blade templates and vue.js page components.

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.