Gabotronix
30
3
Vue

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

Posted 2 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:

@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.

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

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.