Sometimes, we want to hide Vue.js template before it is rendered.

In this article, we’ll look at how to hide Vue.js template before it is rendered.

How to hide Vue.js template before it is rendered?

To hide Vue.js template before it is rendered, we add the v-cloak directive and set its style.

For instance, we write

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

to add the v-cloak directive.

Then we hide the content of the div before it’s rendered with

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

Conclusion

To hide Vue.js template before it is rendered, we add the v-cloak directive and set its style.