How to hide raw content during loading with v-cloak

The problem

If you're familiar with AngularJS, you must have heard about ng-cloak, that prevents the document from showing unfinished AngularJS code while AngularJS is being loaded.

There's a similar directive with VueJs, that is named v-cloak.

VueJs applications can make HTML documents flicker when the application is being loaded, showing the AngularJS code for a second before all code are executed. Use the v-cloak directive to prevent this.

How to use v-cloak

Here's a codepen illustrating the use of v-cloak with a method simulating an application taking time to load.

The directive v-cloak remains on the element where it is placed until the page is completely loaded.

So the first thing to do is to declare the following CSS in order to hide any element with the v-cloak attribute:

[v-cloak] {
  display: none;

Then, you just need to add the directive in the component you want to hide until it is completely loaded:

[cloak]Hold it... <span v-cloak>{{test}}</span>

The codepen shows you the difference between using v-cloak and not using it, the first line is without v-cloak and the second with.

We are simulating a long query that makes the page taking a long time to load. Here's a gif showing you the result, with the first line without using v-cloak and the second with it:


The brief moment where the user can see unloaded element can lead to a poor user experience. So, if you must answer this problem, keep in mind that you always have the option to use the v-cloak directive!