Vue Js Hide VueJS syntax while the page is loading?
Vue Js Hide the element until the Vue Instance is Ready:In Vue.js, the v-cloak
directive is used to hide the text content of an element until the Vue.js app has finished compiling the template. This is useful in situations where you don't want the text to appear before the Vue.js app has finished rendering the template. The text content is hidden by applying a CSS class, "v-cloak," to the element. Once the app has finished rendering the template, the class is removed, and the text content becomes visible.

written

reviewed

updated

Thanks for your feedback!
Your contributions will help us to improve service.
How do I hide the VueJS syntax while the page is loading?
In the below example, the message will be hidden until the vue app finishes compilation and the v-cloak class is removed.
The content of VueJS is hidden until the app finishes compilation.
Copied to Clipboard
10
<div id="app">
<div v-cloak>
{{ message }}
</div>
</div>
<style scoped>
[v-cloak] {
display: none;
}
</style>
Output of above example
Ad