v-cloak doesn't hide components while loading page

user_15672265 0
Viewed 434

I can't get v-cloak working in my app. As you can see here components are loaded before vue.js has finished loading (in this example I hit Reload a few times to highlight the issue).

My implementation:

<body>
<div id='myapp' v-cloak>

My CSS:

[v-cloak] {
display: none !important;
}

}

What I tried so far:

  • Moving the style to bottom of CSS to prevent accidental overwriting.
  • Adding !important to display:none to ensure execution.
  • Adding v-cloak to the components that stuck out in the issue.

Nothing works. Any ideas?

vuejs2 vue.js
1 Answers

I think you just misunderstand what v-cloak does:

This directive will remain on the element until the associated Vue instance finishes compilation.

Important word here is compilation - this means it works only for in DOM templates which are compiled at runtime. It has nothing to do with component loading (some data to display for example)

If you were using Vue 3, there is special component for this called suspense. In Vue 2 you must do it yourself with v-if or v-show ...ie hide or display your components depending on whether the data is already loaded or not. Or use a 3rd party solution as Vue-Promised

user_3812820
Related