How do I hide the VueJS syntax while the page is l

Question

maybe this is a trivial question.

so, when I run my vuejs application on browser with enables throttling download speed (sets to low connection). I got unfinished vue syntax output in browser.

I know we can trick this out with showing loading image before entire page has loaded, but it's there any best solution to fix this?

Answer 1

**html**
<div v-cloak>{{ message }}</div>

**css**
[v-cloak] { display: none; }

Answer 2

As suggested by others using v-cloak is proper solution. However as @ DelightedD0D mentioned it IS clunky. Simple solution is to add some CSS in the pseudo selector ::before of v-cloak directive.

In your sass/less file something along the lines of

[v-cloak] > * { display:none; }
[v-cloak]::before {
  content: " ";
  display: block;
  position: absolute;
  width: 80px;
  height: 80px;
  background-image: url(/images/svg/loader.svg);
  background-size: cover;
  left: 50%;
  top: 50%;
}

Of course you'd need to provide a valid and accessible path to loader image. It will render something like.

Hope it helps.

Answer 3

You can use the v-cloak directive, which will hide the Vue instance until the compilation finishes.

HTML:

<div v-cloak>{{ message }}</div>

CSS:

[v-cloak] { display: none; }

Answer 4

Yep, you can use v-cloak, I like use spinkit, is a great library with only CSS, check a simple example:

var vm = null;
    setTimeout(function() {
    	vm = new Vue({
         el: '#app',
        data: {
          msg: 'Is great, using: ',
          url: 'http://tobiasahlin.com/spinkit/'
         }
      });
     }, 3000);

#app .sk-rotating-plane,
[v-cloak] > * { display:none }
body{
	background: #42b983;
	color: #35495e;
}
#app[v-cloak] .sk-rotating-plane {
	display:block;
	background-color: #35495e;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tobiasahlin/SpinKit/master/css/spinkit.css">


<div id="app" v-cloak>
    <div class="sk-rotating-plane"></div>
    <h1>Vue with c-cloak</h1>
  <p>
    {{ msg }}
    <a :href='url'>{{ url }}</a>
  <p>
</div>

Link: - http://tobiasahlin.com/spinkit/

Answer 5

I attached the following codepen. You can see the difference with and without v-cloak.

<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>

---

http://codepen.io/gurghet/pen/PNLQwy

Answer 6

Using v-cloak directive you can hide un-compiled mustache bindings until vue instance is done compiling. You must use the CSS block to hide it until compiled.

HTML:

<div v-cloak>
  {{ vueVariable }}
</div>

CSS:

[v-cloak] {
  display: none;
}

This <div> will not be visible until the compilation is completed.

You can see this link Hide elements during loading using v-cloak for better understating.