3

I have a Vue.js app that loads content in the created() method. I use a v-if tag to hide all of my UI until that content is loaded and ready to go. It works fine on the initial load, but if a user were to hit refresh in Chrome then the app displays (flashes momentarily) content that would not otherwise be displayed (based on the data being loaded in created).

From what I understand using the v-if tag, with a flag from my vuex store that indicates when the load has completed, is the proper way to hide content until I am ready to display it.

How can I avoid having the content flash on the refresh?

Ann Kilzer
  • 1,266
  • 3
  • 16
  • 39
VBAHole
  • 1,508
  • 2
  • 24
  • 38
  • 1
    Check this link https://stackoverflow.com/questions/34870926/v-cloak-does-not-work-in-vue-js – Gowthaman Sep 23 '19 at 20:48
  • 1
    Solved here. https://stackoverflow.com/questions/41847096/html-tags-containing-vue-js-v-if-and-v-for-directives-flash-at-loading – banderson Sep 23 '19 at 20:59

1 Answers1

5

Vue.JS has solved this using the v-cloak directive. (see docs)

You add the v-cloak directive to your application's root element:

<div id="app" v-cloak>
...
</div>

Then add this CSS rule to your application's stylesheet:

[v-cloak] {
  display: none;
}

Everything within the app div will then be hidden until Vue has initialized.

tony19
  • 125,647
  • 18
  • 229
  • 307
Vince
  • 3,207
  • 1
  • 17
  • 28