Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

v-cloak doesn't hide components while loading page

Tags:

vue.js

vuejs2

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?

like image 427
dan_e Avatar asked Mar 12 '26 02:03

dan_e


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

like image 193
Michal Levý Avatar answered Mar 15 '26 01:03

Michal Levý



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!