Hiding vue.js template before it is rendered

Question

I am trying to hide the vue.js template's contents before it is fully rendered. Consider following template:

<div class="loader">    <table class="hidden">     <tr v-for="log in logs">       <td>{{log.timestamp}}</td>       <td>{{log.event}}</td>     </tr>   </table> </div> 

When I render this template on the server, the user sees the contents of the <tr> element before it is rendered. For this reason I use the class hidden to hide it, before it is fully rendered.

Also before it is rendered, I am showing a loader element with some animated progressbar.

Once it is rendered, I would just call element.show() in jQuery and hide the progressbar as well. My question is: is it okay to mix jQuery and vue.js to achieve this?

var vueLogs = new Vue({   el: "#checkInLogsHolder",   data: {logs: []} }); var holder = $("#checkInLogsHolder");  function response(payload) {   // hiding the loader animation   holder.find(".loader").remove();   // showing the rendered table   holder.find("table").show();   vueLogs.logs.unshift(payload); } 

Is there some better way to do this?

Answer 1

Vue already has a v-cloak directive built in, you just need to add the relevant css class:

[v-cloak] {   display: none; } 

And then apply it to your element like so:

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

Here's the JSFiddle: https://jsfiddle.net/2jbe82hq/

If you remove v-cloak in that fiddle you will see the mustached {{message}} before the instance has been mounted.

If you want to display a loader while you retrieve data from your server, then you combine a boolean flag with v-if to show and hide the loader:

var vm = new Vue({   el: "#app",   created(){     this.$http.get('url').then(response => {       // set loader to false       this.loading = false;     });   },   data: {     message: 'Hello Vue!',     loading: true   } }); 

You can then do:

<div v-if="loading">    Loading... </div> <div v-else>     {{message}} </div> 

Here's the JSFiddle for that: https://jsfiddle.net/fa70phLz/

It's also possible to use a loading class as well and then use v-bind:class to apply and remove the class based on the flag, which is useful if you want to overlay the entire page with a loader.

<div :class="{'loading': loading}"></div>