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 }}
var example = new Vue({
  el: '#app',
  data: {
    name: 'Annoying Message'
  [v-cloak] {
    display: none;

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.

About Pavel Petrov 2 Articles |  21 How-tos
Pavel is a senior developer for the last 7 years, with extended interest in Linux administration, WordPress and Symfony.

1 Comment

Leave a Reply

Your email address will not be published.