How to hide VueJS elements before load

Have you ever worked on a VueJS projectonly to see that all components initially flash when the page loads? Every rookie in the VueJS world has seen this problem and I did too when I started, so I decided to put together this short how-to in order to help others having the same problem. The key to hiding all vue elements before compilation is using the so-called “v-cloak” directive. Example:

<div id="app">
  <div v-cloak>
    Hello {{ name }}
  </div>
</div>
<script>
var example = new Vue({
  el: '#app',
  data: {
    name: 'Annoying Message'
  }
})
</script>
<style>
  [v-cloak] {
    display: none;
  }
</style>

Now without the v-cloak the “Hello {{ name }}” will flash before vue compilation and then render properly. There are plenty of reasons for that to happen one being latency and another being browsers are sometimes slow. With “v-cloak”, however the contents will remain hidden hidden until the compilation is finished and then rendered properly, the user will never know something different then normal site rendering happened.