What is v-cloak used for?

v-cloak is a helper Vue directive used to hide the template until the Vue application has been initialized.

In simple terms:

v-cloak helps avoid a flash of the uncompiled template ({{ }}) before Vue loads.

---

#Why is this needed?

When an application loads, there can be a moment when the HTML has already rendered, but Vue has not yet compiled the templates.

For example, the user might see:

{{ message }}

instead of the already computed text.

This looks unpleasant (the so-called template flicker).

v-cloak lets you hide such elements until Vue's initialization is complete.

---

#How it is used

#1. Add the directive to the HTML:

#2. And the styles:

#3. Once Vue mounts, the attribute is removed automatically

Vue removes v-cloak itself, and the element is displayed again, now with the correct data.

---

#Example

Before Vue initializes:

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

The user would see:

{{ counter }}

But thanks to v-cloak, the element is hidden.

After Vue initializes:

• v-cloak disappears
• the DOM shows the correct value, for example: 42

---

#Important

• v-cloak does not control reactivity and does not affect how the application works.
• It is only a visual filter that hides the uncompiled template.
• It is used most often in SSR, SPAs with slow loading, and older browsers.