How to usea combination of CSS and Vue.js lifecycle hooks in EJS
Another method to achieve a similar effect of hiding Vue.js syntax during page load is to use the mounted lifecycle hook along with some CSS in your Vue instance. It conditionally renders the Vue.js template based on the value of the display property in the CSS stylesheet rule, allowing you to control the visibility of the content during the initial page load.
Syntax:
<span class="CSSClassToHideMessageTillContentLoads">{{textMessage}}</span>
Example: The following example demonstrates the usage of the Vue.js mounted lifecycle hook in conjuction with CSS classes and rules in Vue.js to hide the Vue.js syntax while the page is loading.
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; } .hidden { display: none; } #app { padding: 10px; font-size: 1.25rem; } </ style > < title >vue-w3wiki</ title > </ head > < body > <!-- Vue.js Template --> < h1 > w3wiki mounted lifecycle hook in Vue.js </ h1 > < div id = "app" > < div > Without CSS and mounted hook: {{ message }} </ div > < div > With CSS and mounted hook: < span class = "hidden" > {{ 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' }; }, mounted() { // Select the element to hide // till page has loaded document.querySelector('#app div span') .classList.remove('hidden'); } }); const vm = 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