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

Published 5 days 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:

@extends('layouts.master')
@section('content')
<body id="vue_root">
    <page-index data={{ json encoded data from backend }}></page-index>
</body>
@endsection

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.

Best Answer (As Selected By Gabotronix)
martinbean

@Gabotronix A pattern for what? I don’t know what you’re building.

Building up pages that are a single Vue component in themselves just have all the drawbacks of an SPA with no upside. Either build an SPA, or build a “traditional” app where you navigate page to page, and dynamic functionality is added using multiple Vue components.

A Vue component is meant to be used for exactly that: discreet components of functionality; not building entire pages.

martinbean

@Gabotronix I’m not sure what benefit this gives? You’re just making your website as reliant on JavaScript as a SPA.

Gabotronix

I see, so what pattern would you recommend me @martinbean.

Just using laravel for server rendering the views and adding the neccesary components to blade templates, since I have a single vue instance would it be possible to import components and classes only when needed?

What other structure patterns exist for easily maintaining laravel + vue.js MPAs

martinbean

@Gabotronix A pattern for what? I don’t know what you’re building.

Building up pages that are a single Vue component in themselves just have all the drawbacks of an SPA with no upside. Either build an SPA, or build a “traditional” app where you navigate page to page, and dynamic functionality is added using multiple Vue components.

A Vue component is meant to be used for exactly that: discreet components of functionality; not building entire pages.

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