title: Hiding vue.js template before it is rendered
body: <p>I am trying to hide the vue.js template's contents before it is fully rendered. Consider following template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="loader"&gt; 
    &lt;table class="hidden"&gt;
      &lt;tr v-for="log in logs"&gt;
        &lt;td&gt;{{log.timestamp}}&lt;/td&gt;
        &lt;td&gt;{{log.event}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I render this template on the server, the user sees the contents of the <code>&lt;tr&gt;</code> element before it is rendered. For this reason I use the class <code>hidden</code> to hide it, before it is fully rendered.</p>
  
  <p>Also before it is rendered, I am showing a loader element with some animated progressbar.</p>
  
  <p>Once it is rendered, I would just call <code>element.show()</code> in jQuery and hide the progressbar as well. My question is: is it okay to mix jQuery and vue.js to achieve this?</p>
  
  <pre class="lang-js prettyprint-override"><code>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);
  }
  </code></pre>
  
  <p>Is there some better way to do this?</p>