Suggest an edit

Improve this article

Refine the answer for “What is v-cloak used for?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`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:

```html
<div id="app" v-cloak>
  {{ message }}
</div>
```

#### 2. And the styles:

```html
<style>
[v-cloak] {
  display: none;
}
</style>
```

#### 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**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts251 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.