CODEWITHSUNDEEP
vue.js
VBAHole
VBAHole

Reputation: 1518

Vue.js showing content that should be hidden by a v-if tag when user refreshes page

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?

Upvotes: 3

Views: 1568

Answers (1)

Vince
Vince

Reputation: 3286

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.

Upvotes: 5

Related Questions