Laravel Vue SPA vs MPA/SSR - laravel

Question

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?

Answer 1

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
},
],
});