How to usethe v-cloak directive in EJS
In this approach, we will use the v-cloak directive provided by Vue.js to hide the Vue.js syntax until the page has loaded. This directive is designed to prevent the Vue.js template from being visible until Vue.js has compiled and mounted the associated component.
Syntax:
<span v-cloak>{{textMessage}}</span>
Example: The following example demonstrates the usage of the v-cloak directive in Vue.js to hide the Vue.js syntax while the page is loading. Remember to define a stylesheet rule for v-cloak to set the display to none.
HTML
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { height: 90vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } h1 { color: green; } [v-cloak] { display: none; } #app { padding: 10px; font-size: 1.25rem; } </style> <title>vue-w3wiki</title></head><body> <!-- Vue.js Template --> <h1> w3wiki v-cloak directive </h1> <div id="app"> <div> Without v-cloak: {{ message }} </div> <div>With v-cloak: <span v-cloak>{{ message }}</span> </div> </div> <!-- VueJS CDN Link --> <script src="https://unpkg.com/vue@3/dist/vue.global.js"> </script> <!-- Custom Script --> <script> setTimeout(() => { const app = Vue.createApp({ data() { return { message: "This is a sample message" } } }) app.mount('#app') }, 2000); </script></body></html> |
Output:
How to Hide the VueJS Syntax While the Page is Loading ?
Vue.js is a JavaScript framework used in building powerful and elegant user interfaces. In this article, we will learn how to hide the VueJS syntax while the page is loading. This approach ensures that users don’t see the uncompiled Vue.js syntax during the initial page load, providing a smoother user experience.
The following approaches can be used to accomplish this task:
Table of Content
- Using the v-cloak directive
- Using a combination of CSS and Vue.js lifecycle hooks
Contact Us