Javascript – How to hide the VueJS syntax while the page is loading

javascriptvue.js

maybe this is a trivial question.

so, when I run my vuejs application on browser with enables throttling download speed (sets to low connection). I got unfinished vue syntax output in browser.

Vue js syntax appear in browser

I know we can trick this out with showing loading image before entire page has loaded, but it's there any best solution to fix this?

Best Solution

You can use the v-cloak directive, which will hide the Vue instance until the compilation finishes, if you combine it with the right CSS.

HTML:

<div v-cloak>{{ message }}</div>

CSS:

[v-cloak] { display: none; }