Check if vue instance has finished loading

Question

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?

tony19 · Accepted Answer · 2022-07-15 02:50:20Z

2

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/

edited Jul 15, 2022 at 2:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 12, 2022 at 8:41

Karl-Johan Sjögren

17.8k7 gold badges66 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

devme deveper Over a year ago

I know this works, but for some reason it isn't. Btw, I'm creating a wordpress page template. might have something to do with wordpress?

Karl-Johan Sjögren Over a year ago

Is the attribute not removed after loading or is it visible anyway?

devme deveper Over a year ago

Nothing changes, still the same with/without v-cloak.

devme deveper Over a year ago

Oh, I have to enclose everything after <div id="app"> with <template></template>

Karl-Johan Sjögren Over a year ago

There should be no need for a template tag. Tested it out just now with this fiddle. jsfiddle.net/mx014kgj

Collectives™ on Stack Overflow

Check if vue instance has finished loading

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related