Sometimes, we want to fix v-cloak not working in Vue.js.

In this article, we’ll look at how to fix v-cloak not working in Vue.js.

How to fix v-cloak not working in Vue.js?

To fix v-cloak not working in Vue.js, we’ve to set the styles for [v-cloak] to hide the items.

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 fix v-cloak not working in Vue.js, we’ve to set the styles for [v-cloak] to hide the items.