Vue rendering elements before hiding them

I have a very simple site where I’m using the most basic Vue.

When I load the site, it renders divs which are not supposed to show, for a fraction of a second, before hiding them. It makes the site look very unprofessional.

Here is the site if you want to experience the glory of flashing divs: http://sqlforever.com/

Looking around on the web, I’ve tried to use v-show, v-if and even v-cloak. None of them work.

Here is an example where I’m using v-show, along with v-cloak:

<div class="row v-cloak" v-show="display_schema"> 
... 
</div>

The definition of v-cloak:

[v-cloak] { display:none; }

Vue definition:

const app = new Vue({
        el: '#app',
        data: {
          ...
          errorMsg: "",
          warnMsg: "",
          ...
          display_schema: false,
          ...

Else where I’m using v-if:

      <div class="row">
        <div id = "errorPanel" v-if="errorMsg != ''" class="alert alert-danger alert-dismissible fade show v-cloak" role="alert">
          <strong>ERROR: </strong> {{errorMsg}}
          <!--button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button-->
        </div>

        <div id = "warnPanel" v-if="warnMsg != ''" class="alert alert-warning alert-dismissible fade show v-cloak" role="alert">
          <strong>WARNING: </strong> {{warnMsg}}
          <!--button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button-->
        </div>
      </div>

Currently I’m also loading css and js directly off the web, I’ll load them locally when this goes ‘production’ but simple experiments didn’t seem to make a difference.

I’m not normally a web dev but I’ve done a site or two using knockoutjs and don’t remember having this issue.

What am I doing wrong?

Answer

You’re using v-cloak but incorrectly. From the docs:

This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.

It’s a directive, not a class name. Your CSS is correctly styling it as an attribute:

[v-cloak] { display:none; }

But you need to apply it in your template as a directive, not a class name. For example, this will remove the flash of content:

<div class="container" id="app" v-cloak>

Advertisement

Answer