Vue.js : Best way to implement MPA(Multi page app) in laravel

Question

I have been looking around for quite a time, But didn't got anything convening.

What will be the best approach and practice to implement Vue MPA architecture in laravel.

Searched for quite a bit. But there isn't anything which will give you a clear idea. Your answer will help alot, Please make it brief.

It will also be helpful to answer the point :

• Is it a good idea to use just laravel as a data API, And keep Vue separate from laravel ?
• Best approach for implementing hybrid of SPA and MPA.

Answer 1

Some options that I've already used:

Use Laravel to render the "main view" + connect vue.js application.

Basically laravel will render the Vue application and every request goes throught an API.

1. Easy to setup
2. Authentication + user validation is easier (you can use laravel session manager for that - don't need to build/use tokens or whatever. "No need to worry about your application state".)
3. Easy to "disconnect" from Laravel - if you choose in the future to decouple the SPA application.

Use laravel (or lumen) only as an API, and on another server render a SPA.

This can take more time, since you'll need to setup an extra server, prepare cross-origin, etc.

1. Also easy to setup, but can take more time than option #1
2. You'll need to create something for user validation/state management, etc.
3. Easy to place into laravel, if you decide in the future to use "only one app".
4. Can be easier to maintain/scale (if you have a frontend team, they don't need to worry about laravel - same for your "laravel team", they "won't need to worry" about the frontend)

Laravel + Vue = "one application"

You can use Laravel to render all views + vuejs for components/elements in the page.

1. Easy to setup. You have laravel + vuejs, and they are already prepared to be used together. https://laravel.com/docs/5.5/frontend#writing-vue-components
2. Not so easy to decouple. In this case you'll need to create the same views for vue.js. This can take time.
3. This is the "traditional web development" (in my opinion). If I had to start a project like this today, I wouldn't create all pages in Vue.js + something in Laravel (Controller + new route) to render this view. If you do this (again - my opinion), it's just extra work. If you are worried about SEO, there are "fallbacks"/extra options.

--

All options are testable + scalable.

It also depends on how you start (Should I worry about how I'll decouple the app in the future? Laravel + Vue will be for good?), how your team will work (Does the frontend team really needs to setup laravel or they only need to worry about the frontend code?), etc.

Not sure if i answered your question, if not, please leave a comment.