How to usea combination of CSS and Vue.js lifecycle hooks in EJS

Approach 1: Using the v-cloak directive

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

Tags:

#Geeks Premier League 2023 #Vue.JS #Geeks Premier League #JavaScript #Web Technologies

Approach 1: Using the v-cloak directive

How to usea combination of CSS and Vue.js lifecycle hooks in EJS

Syntax:

HTML

How to Hide the VueJS Syntax While the Page is Loading ?

Similar Reads

Contact Us