v-cloak

Last updated

What is v-cloak?

The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template. The v-cloak directive remains until the component instance is mounted.

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

Combined with CSS, you can hide elements with v-cloak until they are ready.

[v-cloak] {
  display: none;
}

The <div> will not be visible until the compilation is done.

Free resources to learn v-cloak

More in stage 10: SSG

v-cloak: common questions

Can I learn v-cloak in Hindi?

This lesson is written in English. Once you sign in, open it in the interactive course and ask the AI tutor to explain v-cloak in Hindi or Hinglish. The tutor answers from this lesson’s own text, so it stays on the syllabus, and it runs on your own Google, OpenAI or Anthropic key.

Is this v-cloak tutorial for beginners?

It is lesson 56 of 84 in the free Vue roadmap, in stage 10, SSG. If you are new to Vue, start from stage 1 and come back here in order; if you already know the earlier stages, this lesson stands on its own.

Still confused? Ask me