Laravel VueJS: building multi page app without resorting to single page application ( SPA ) approach

Question

I am trying to build a Laravel 5.5 + VueJs multi page app. I do not want to use SPA (Single Page Application) approach to make it seem to be a multi page app.

This is the

Answer 1

I don't think it's very easy to give an answer to your question, so I will share my experience. At the beginning I was implementing Vue.js in the same way you do so:

• Multipage app
• Every page has it's own components
• Every time the user moves to another page, potentially a new js file is loaded.

It was a complete failure. At the beginning I was using a single app.js file, but I was loading tons of useless components for a single form... Why do I have to load the whole application when I need only two or three components? So I had to create tons of xxx-app.js files and break the DRY principle. It wasn't the best... But it worked and was easy to implement.

SIDE NOTE: I wasn't using any kind of file chunking or other systems that may have removed this kind of problem. I was at the very beginning with VueJS development. Probably at the time I didn't even know it was possible.

The structure was something like:

page1.blade.php

@extends('my.layout')

@push('scripts')
    <script src="asset('page1-app.js')"></script>
@endpush

@section('content')
    <page1-component attr1="{{ $attr1 }}" [...]></page1-component>
@endsection

As you can see the structure is kinda simple:

• Extend the required layout in order to load the CSS and extra scripts required
• Push in the scripts stack the Vue instance you need
• In the content section call the component you need

But the problems were born in the javascript part... I was using 1/3 of the features of modern javascript app development. Everyday a new problem was coming out... First JQuery was useless... Then the technical SEO part was hard to handle... Then the Vuex store logic was replicated and useless when the user reloads the page... In a very short time I realized that this approach was completely wrong...

Well, for the application I was working on at least. So IMHO and as in many cases the answer to your question

What is wrong with the approach outlined above ? What should be the proper way however ?

is It depends.

If you have a small application, easy to maintain and without complex workflow, your solution works... You just have to remember that:

1. If you include in every page your app.js file but you need only 1 or 2 components it may become a little heavy.
2. There's a high risk of redundancy.
3. The initial components state depends on the backend attributes given to the blade view... If something is wrong, the entire application messes up.

If you're facing these problems consider to move to a complete SPA logic... Easier to maintain, you don't have to invent a workaround everyday and so on.

If your application is an "enterprise" solution... Well avoid to mix up Laravel and Vue in a single codebase... Split everything and handle the backend and the frontend as two completely separate entities.