javascript - How do I hide the VueJS syntax while the page is loading?

Question

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.

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?

Answer 1

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; }