v-cloak does not work in vue.js?

Question

There is a div in my page that for show the error message.When I refresh the page,it will appear for a while then it disappear. I added v-cloak but it doesn't work.

this is the code, showErrorMsg is false

<div v-cloak v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error">
  <a href="#" v-on:click="showErrorMsg = false" class="del"><i>&#xe906;</i></a>
  <p v-text="errorMsg"></p>
</div>

How to fix this?

Possible duplicate of [Vuejs - Hide vuejs syntax when page loading](http://stackoverflow.com/questions/36186831/vuejs-hide-vuejs-syntax-when-page-loading) — Gus, Feb 07 '17 at 18:37

Eduardo Stuart · Answer 1 · 2023-04-14T14:24:45.230

86

Just include this code to your css file

[v-cloak] { display:none; }

https://vuejs.org/api/built-in-directives.html#v-cloak

Usage example:

<div class="xpto" v-cloak>
    Hello
</div>

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.

edited Apr 14 '23 at 14:24

answered Jan 19 '16 at 13:18

Eduardo Stuart

2,869
18
22

3

I would suggest adding this to the bottom of the CSS file. v-cloak is a regular CSS and can be overwritten. So, if it doesn't work for you, check if some other style is not forcing different display property. Alternatively, disable vue and see if the code is hidden. Vue will then make it visible. – Peter Matisko Sep 13 '17 at 12:57
2

This doesn't work if your `
` has `display: ...` set to something other than the default. In that case you may need `!important` as Pleymor's answer suggests.
– Simon East Mar 08 '19 at 01:25
Updated link is https://vuejs.org/api/built-in-directives.html#v-cloak – Marc Vidal Moreno Apr 12 '23 at 12:15

Pleymor · Answer 2 · 2019-03-27T08:35:24.590

29

I faced the same issue, and it was due to a conflicting display property on my div. To solve it, I used the !important flag on the [v-cloak] as:

[v-cloak] {
    display: none !important;
}

.my-class {
    display: table-cell;
}

edited Mar 27 '19 at 08:35

answered Apr 05 '18 at 15:24

Pleymor

2,611
1
32
44

score 10 · Answer 3 · 2017-11-08T10:52:13.017

10

Vue.js - 2.3.4, I added the v-cloak on the app container, adding this on the parent container, I find your not repeating the code keeping it DRY.

HTML:

<div id="app" v-cloak>
 Anything inside gets the v-cloak
</div>

CSS:

[v-cloak] {
 display:none;
}

Codepen Example:

https://codepen.io/Frontend/pen/RjoKQm

edited Nov 08 '17 at 10:52

answered Nov 07 '17 at 14:05

Great suggestion. Makes sense to me. – james-see Jan 24 '18 at 21:18

score 7 · Accepted Answer · edited Sep 28 '21 at 19:29

7

I fixed this problem by rewriting the CSS and adding a class in the CSS file

CSS:

[v-cloak] .v-cloak--hidden{
  display: none;
}

HTML:

<div v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error v-cloak--hidden">
  <a href="#" v-on:click="showErrorMsg = false" class="del"><i>&#xe906;</i></a>
  <p v-text="errorMsg"></p>
</div>

edited Sep 28 '21 at 19:29

barry allen

39
9

answered Jan 19 '16 at 08:06

Song Yongtao

825
1
8
18

I still needed to have v-cloak as well but this gave the best result. – Jeff - Software Results Dec 08 '16 at 05:01
Useful gist which expands suggested solution https://gist.github.com/adamwathan/3584d1904e4f4c36096f – gorodezkiy Jun 01 '17 at 17:15

score 1 · Answer 5 · answered Apr 20 '20 at 03:19

If you are using CDN to get Vue and using Bootstrap CSS then the reason might be you are loading the Bootstrap CSS in the bottom of the body tag, moving it back to the head tag worked for me. Make sure that you keep that vueJS file in the button as it is.

<HTML>
<head>
  All link and script tag here
</head>
<body> 
  <div id='app' v-cloak>
    {{ something }}
  </div>
  <script src="app.js"></script>
</body>

score 0 · Answer 6 · answered Feb 03 '21 at 16:09

I have a scenario where I've got a search form and below, the results with a v-if block, waiting for submit.

I changed the v-if to v-show, that seemed to help. I tried the v-cloak--hidden class but didn't work either (v-cloak is already styled to display: none). What did work apparently was to set the data results container display style to none and then when submitting the form (in the processForm method), setting the display to block and show all the results.

  processForm() {
      // reset page number on new search          
      document.getElementById("data-container").style.display="block"
      this.pageNumber = 1;
      this.remoteRequest();
  },

Without that change, on a full page refresh I could still see the moustaches coming up. Here the full HTML page, simplified.

<div id="app" v-cloak>
      <main class="main-section">
        <form method="POST" class="p-4 text-center" @submit.prevent="processForm">
            <button type="submit" name="button" class="btn btn-primary">
               Find
            </button>
        </form>

        <!-- Results  -->
        <div id="data-container" class="container-fluid pt-2 pb-4" style="display:none">
           <div class="row">
              <div class="col">
                 <div id="recordsContainer" v-show="totalInScreen > 0">
                    <div class="card mt-5" v-for="(result, index) in results" :id="'itm-'+index" :key="result.id">
                      <div class="card-body">
                        <div class="row">
                          <div class="col">
                             <h2 class="doctor-name">{{ result.doct_name }}</h2>
                             <h2 class="doctor-bio">Bio</h2>
                             <p>{{result.doct_bio}}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                 </div>
              </div>
           </div>
        </div>
      </main>
  </div>

score -3 · Answer 7 · answered Nov 17 '16 at 16:40

Unfortunately the above 2 answers didn't work for me as the problem was something else. Since this questions pops up #1 on Google, I thought I'd share my solution.

If you've defined a display css rule somewhere that's more specific, it will break the v-cloak functionality. However! Do not despair - simply copy this into your CSS file and it will work!

[v-cloak] .v-cloak--block {
  display: block!important;
}

[v-cloak] .v-cloak--inline {
  display: inline!important;
}

[v-cloak] .v-cloak--inlineBlock {
  display: inline-block!important;
}

[v-cloak] .v-cloak--hidden {
  display: none!important;
}

[v-cloak] .v-cloak--invisible {
  visibility: hidden!important;
}

.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
  display: none!important;
}

This and the other answers didn't work for me, because I was using v-cloak in combination with v-if. I needed to wrap all v-if blocks in a
and then it worked as documented. — david_nash, Mar 20 '17 at 05:47

v-cloak does not work in vue.js?

7 Answers7

Linked