VueJS - Mustache syntax showing up for a split second

Question

I am trying to learn vue and created the sample below purely for test purposes:

import App from '../comp/app.vue';
import Two from '../comp/two.vue';

const routes = [
    { path: '/', component: App },
    { path: '/two', component: Two }
]
const router = new VueRouter({
    base: base.pathname,
    mode: "history",
    routes // short for routes: routes
})

window.app = new Vue({
    el: "#container",
    data: {
        message: "home",
        date: new Date(),
        seen: false,
        fruits: [
            { name: "apple" },
            { name: "orange" },
            { name: "banana" }
        ]
    }
})

But, before inserting any values the page will display the mustache syntax for a brief moment. Almost as if VueJS isn't working. After a short while VueJS will kick in and fill in the right values for the variables.

Why is that happening and how can I fix this behavior?

Answer 1

It's because vueJS hasn't loaded up all the way yet.

you can use a so called "v-cloak" to hide it. To do so add this to your css:

[v-cloak] {
  display: none;
}

And decorate your element with the v-cloak tag like so:

<div v-cloak>
  {{ message }}
</div>

More info can be found at: https://vuejs.org/v2/api/#v-cloak