I am developing a multi-page web application (MPA) using Laravel version 5.6 with vue.js version 2.0.
I am using multiple vue components e.g. Demo.vue and using that component in php blade file.
The issue is when I try to see the page view source (ctrl+u) it shows only html tags used in php blade file but doesn't show vue component's HTML elements.
I want the Vue component HTML elements also to be shown in page view source since my google crawling is majorly dependent on vue components used. Could you help me out for this issue?
Also attaching the screenshots of the page source and example code snippet for the same.
-
Demo.vue file code
<template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card card-default"> <div class="card-header">Example Component</div> <div class="card-body"> I'm an example component. </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.log('Component mounted.') } } </script>
-
App.js
require('./bootstrap'); window.Vue = require('vue'); window.axios = require('axios'); import VModal from 'vue-js-modal'; Vue.use(VModal); Vue.component('demo-component', require('./components/Demo.vue')); const app = new Vue({ el: '#app', });
-
Layout.blade.php
<!DOCTYPE html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <form method="POST" action="path_to_action"> <meta name="csrf-token" content="{{ csrf_token() }}"> </form> <!--<link href="css/style.css" rel="stylesheet">--> <link href="https://fonts.googleapis.com/css?family=Roboto:300,500,700,900" rel="stylesheet"> <link href="/css/app.css" rel="stylesheet" type="text/css"> </head> <body id="body"> <div class="content" id="app"> <demo-component></demo-component> </div> <script type="text/javascript" src="/js/app.js"></script> </body> </html>
i.e. We want the HTML code of to be rendered in view source.
We even tried to check various articles on SSR, but those examples are shown using static content, whereas our data is dynamic coming from database and is a multi-page application.
e.g. We tried below approach :-
https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/
The above article is showing for static data only...
Thanks, Charlize