Laravel Vue SPA vs MPA/SSR

user_5661749 0
Viewed 1437

Many laravel/vue tutorials use ajax calls to get the data. It seems that the SPA is completely isolated from Laravel. I.e. Laravel is just a data API and the vue app could also simply be hosted on a third party external server (e.g. AWS S3). Is this the recommended way, or should I rather use Laravel for Routing and have separate views that implement individual components and already included data instead of using a SPA?

laravel vue.js
1 Answers

For an SPA, I would recommend just going with the standard setup, which is Laravel on the webserver and Vue in the browser. To do this, install Laravel and Vue. AJAX communications from the browser to the server are accomplished with the Axios library which comes with Vue. Here is how to install Laravel and Vue router:

composer require laravel/ui

php artisan ui vue

npm install && npm run dev

npm install vue-router

npm run watch

From within a Vue component, using Axios to communicate with the server looks like the following. Also, in the following, the endpoint is defined in the Laravel > Routes > web.php:

 methods: {

    fetchMessages() {

        let endpoint = `/channels/${this.activeChannel}/messages`;

        axios.get(endpoint).then(resp => {
                    this.messages = resp.data.messages;          
                });
    },

A Vue router is declared in the main js file. For instance, in app.js.

Here is what a Vue router looks like, and additional url paths would be added under "routes":

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
        base: '/',
        mode: 'history',
        history: true,

        routes: [
        {
            path: '/',
            name: 'home',
            component: PostComponent
        },

    ],
});
user_54821820
Related