Currently, I am delving into Vue and facing a challenge setting it up as the complete front-end with Laravel. In my current setup, I have created a personal blog for testing purposes using Laravel with Blade engine and incorporating some Vue components which seems to function correctly.
Now, I want to take it a step further by eliminating Blade entirely and utilizing Laravel solely as an API backend while configuring Vue as the full front end with Server-Side Rendering (SSR). The basic setup is working; I can call Vue and render it using SSR with either Node or PHPv8. However, the issue I am encountering lies in the routing system. Unlike Blade where I could achieve the desired result by employing a default layout as the master and importing it for every post, page, blog, etc...
For instance:
resources/views/layouts/master.blade
<!DOCTYPE html>
<html dir="ltr" lang="{{ app()->getLocale() }}">
<head>
@include('partials._head')
</head>
@if(View::hasSection('body')) {{-- Load Custom Body --}}
<body @section('body')>
@else
<body>
@endif
@yield('content')
@include ('partials._javascripts')
@section('scripts')
</body>
</html>
This structure allows me to dynamically load head per page/post, dynamic content, essential JavaScript libraries (Bootstrap, Vue, FontAwesome, etc...), and custom 'scripts' per page/posts.
I am utilizing the library described at:
https://github.com/spatie/laravel-server-side-rendering
Although I have successfully implemented SSR with node or PHPv8, the vue-router does not seem to call the correct page. My setup includes:
resources/assets/js/app.js
import Vue from 'vue';
import App from './layouts/App';
import axios from 'axios';
import store from './store';
import router from './router';
import navbar from './components/navbar';
import posts from './components/posts';
import sidebar from './components/sidebar';
import footer from './components/footer';
import BlogIndex from './views/blog/BlogIndex';
export default new Vue({
store,
router,
navbar,
posts,
sidebar,
footer,
BlogIndex,
render: h => h(App),
});
resources/assets/js/entry-client.js
import app from './app';
app.$mount('#app');
resources/assets/js/entry-server.js
import app from './app';
import renderVueComponentToString from 'vue-server-renderer/basic';
app.$router.push(context.url);
renderVueComponentToString(app, (err, html) => {
if (err) {
throw new Error(err);
}
dispatch(html);
});
resources/assets/js/router.js
// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home';
import BlogIndex from './views/blog/BlogIndex';
Vue.use(VueRouter);
const routes = [
{ path: '/', name: 'home', component: Home },
{ path: '/blog', name: 'blog', component: BlogIndex },
];
export default new VueRouter({
mode: 'history',
routes,
});
resources/assets/js/store.js
import Vue from 'vue';
import uniq from 'lodash/uniq';
import Vuex, { Store } from 'vuex';
Vue.use(Vuex);
export default new Store({
state: {
},
getters: {
},
mutations: {
},
});
resources/assets/js/views/blog/BlogIndex.vue
<template>
<div class="container">
<navbar></navbar>
<posts></posts>
<sidebar></sidebar>
<footer></footer>
</div>
</template>
<script>
export default {
name: "BlogIndex",
components: {
}
}
</script>
<style scoped>
</style>
app/Http/Controllers/VueSSRController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\File;
use Illuminate\Routing\Route;
class VueSSRController extends Controller
{
public function __invoke()
{
return view('layouts.vue');
}
}
resources/views/layouts/vue.blade.php
<!DOCTYPE html>
<html dir="ltr" lang="{{ app()->getLocale() }}">
<head>
@section('extrajavascripts'){{ asset('js/scripts.min.js') }}@endsection
@include('partials._head')
</head>
@if(View::hasSection('body')) {{-- Load Custom Body --}}
<body @section('body')>
@else
<body>
@endif
{{-- Begin of Vue SSR --}}
{!! ssr('resources/assets/js/server_bundle.min.js')
// Share the packages with the server script through context
//->context('packages', $packages)
// If ssr fails, we need a container to render the app client-side
->fallback('<div id="app"></div>')
->render() !!}
{{-- End of Vue SSR --}}
@include ('partials._javascripts')
@section('scripts')
@show
</body>
</html>
/resources/assets/js/layouts/App.vue
<template>
<div id ="app">
{{ message }}
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: 'SSR working.'
}
}
}
</script>
<style scoped>
</style>
While the SSR functionality works smoothly, the problem arises when the resources/assets/js/router.js does not trigger the loading of the resources/assets/js/views/blog/BlogIndex.vue. Even though the URL "/blog" functions properly, the rendered component is consistently /resources/assets/js/layouts/App.vue.
I would greatly appreciate any guidance on what might be missing in my setup!
Thank you in advance!!!