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:
Nothing works. Any ideas?
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With