CODEWITHSUNDEEP
vue.js
devme deveper
devme deveper

Reputation: 109

Check if vue instance has finished loading

I'm trying to create a simple app, which uses stand-alone vue2,

so my main html looks like this:

main.php

<!DOCTYPE html>
<html>
    <head>
        <?php 
            include('header.html') //contains bootstrap, google fonts, etc(styles).
        ?>
    </head>

    <body>
        <div id="app">
            <h1> {{ test }} </h1>
        </div>


        <?php include('footer.html') ?>
    </body>
</html>

as for the scripts,

footer.html

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script type="module">
    import vue from '<?php echo get_theme_file_uri( 'js/vue2.js' ); ?>';
</script>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

and for the vue instance,

vue2.js

var app = new Vue({
    el: "#app",
    data: {
        test: 'It works!'
    }
});

export default app

The problem is that, on initial load, the interpolation {{ test }} gets displayed literally in the browser instead of the It works! value of test, then proceeds to display correctly(displays the It works! value) for a couple of seconds, which is really annoying.

Is it possible to have a loading callback for initializing the vue instance? or what are the ways to avoid this?

Upvotes: 0

Views: 1071

Answers (1)

Karl-Johan Sj&#246;gren
Karl-Johan Sj&#246;gren

Reputation: 17532

What you want is v-cloak.

Use that attribute on your app with a css-class that hides anything marked with it and then Vue will automaticly remove it when the app is initialized.

[v-cloak] {
  display: none;
}

See the docs for more info: https://v2.vuejs.org/v2/api/#v-cloak

Or see this fiddle for an example: https://jsfiddle.net/mx014kgj/

Upvotes: 2

Related Questions