v-cloak does not work in vue.js?

Solution 1:

Just include this code to your css file

[v-cloak] { display:none; }

http://vuejs.org/api/#v-cloak

Usage example:

<div class="xpto" v-cloak>
    Hello
</div>

This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.

http://vuejs.org/api/#v-cloak

Solution 2:

I faced the same issue, and it was due to a conflicting display property on my div. To solve it, I used the !important flag on the [v-cloak] as:

[v-cloak] {
    display: none !important;
}

.my-class {
    display: table-cell;
}