What I have seen in the tutorials from this site (See VUE series or bulding a forum) the way VUE is used is something like this:
<div id="app">
@include('layouts.nav')
@yield('content')
<flash message="Hi"></flash>
</div>
and in app.js we got something like:
Vue.component('flash', require('./components/Flash.vue').default);
const app = new Vue({
el: '#app',
});
By the default setup this will inject the correct DOM elements and the CSS via JS on pageload, so the page will only render, after JS has been loaded and executed, leading to a flash of unstyled content.
Laravel-mix offers the option to extract Vue styles in a separate css file, so it does not need to be injected by JS.
The only remaining problem is, that the something like <flash message=".."> needs to be replaced with some valid HTML like <div class="flash-message"><span>..</span></div>. The time it takes for JS to replace it, will lead to a flash of unstyled content.
I found that this package https://github.com/spatie/laravel-server-side-rendering allows server-side JS rendering, so when the page loads, the DOM and CSS should be correct, before JS takes place. But instead of the above <div id="app">..</div> one has to use {!! ssr('js/app-server.js') !!}.
If I understand it correctly, then this implies that for every page, the complete content has to be written in a vue file and one can't use blade syntax anymore.
Am I missing anything? If I have to write every site into a vue file, than I cannot only use blade syntax, there will be also no point of passing values from controller to the view - this can't be right?
I noticed that even laracast.com is using some server-side-rendering for VUE, because if I load the page with JS disabled, I will still see the page with all the correct DOM-Elements - however, I cannot image that Jeffrey has stopped using Blade engine for SSR?
So my question is basically, how can I use Vue & Blade with pre-rendered DOM elements, to avoid flash of unstyled content?
