Server-side rendering is great way to increase the perception of loading speed in your full-stack app. Users get a complete page with visible content when they load your site, as opposed to an empty page that doesn't get populated until JavaScript runs.
One of the downsides of using Laravel as a backend for Vue.js was the inability to server render your code. Was. The release of Vue.js 2.5.0 has brought server-side rendering support to non-Node.js environments including PHP, Python, Ruby etc.
In this tutorial, I'll take you through the set up steps for Laravel and demonstrate a simple server-rendered app. Get the code for this here on github .
To follow this steps at first you must have to enable phpV8 in your php extensions.
Step by step Laravel Vue SSR
Step 1: setup a Laravel project and then setup vue in it. We would be use vue-router here so need to install vue-router by
Npm install vue-router --save
Step 2 : And then we need to create 2 more js files alongside with app.js file. First js file will be entry-client.js and another will be entry-server.js. after that we need to mix those files in webpack.mix.js in the public/js directory. And on the welcome.blade.php we have to use the js/entry-client.js instead of js/app.js.
And we need to set webpackConfig on the webpack.mix.js file.
Step 3: Now we have to create some vue component to work. In this project I have made 3 component page as Home.vue, ListPage.vue and Details.vue and 1 key component as App.vue where er will load all our vue page/component as route.
App.vue
https://gist.github.com/Arafat-Alam/f5fefade3b62e05838c30e0d613ef4a6
Other Components Home.vue/ListPage.vue/Details.vue
https://gist.github.com/Arafat-Alam/281b82c742eb487ef0ac9cbfe579ae88
Step 4 : Create a route.js file alongside with app.js. And setup the vue-router on the page
https://gist.github.com/Arafat-Alam/a933fb504e5eb68d7eed7540e61c6e51
Step 5: Now setup the App.js file. On the app.js file import the key vue component App.vue here then import the route.js file and import and setup the vue-router here. And at last create the vue instance.
https://gist.github.com/Arafat-Alam/f6d160c06b236c43c54deea09682a26b
Step 6: Now we have to setup the entry-client.js file. We need to import the app.js file and route.js files here and on router ready need to mount the app to the #app id.
https://gist.github.com/Arafat-Alam/b77ad1ba4f7a502bbd1b16a7b4166a6a
Step 7: And then need to setup the entry-server.js file. Here we need to import the app.js file and route.js files and also need to import renderVueComponentToString from vue-server-renderer/basic. And the need to configure the SSR for vue components
https://gist.github.com/Arafat-Alam/e8d7a10cf39a0d6f1ea3feef60a43477
Step 8 : On the Laravel routes web.php file need to set a route for all vue requests.
https://gist.github.com/Arafat-Alam/c49375ab9d6d4ba816a991ab4c2707a9
Step 9: Now on the controller we received the request and get the path. And call to a user define render function.
The render function render the vue components as the url path.
https://gist.github.com/Arafat-Alam/07f4009686a3347187acb96571d1d2f1
Step 10: And the method return to the view file with the rendered string.
https://gist.github.com/Arafat-Alam/81649fd79a13aedc414b6fe364421b16