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:

Answer 1

I'm just adding a useful things of v-cloak to add a spinner before rendering the full HTML file and thanks to Adam for his Gist - https://gist.github.com/adamwathan/3584d1904e4f4c36096f

If you want to add a spinner before loading your page, you can read this -

• Add v-cloak inside #app.
• Make one div v-cloak--inline which we want to show before HTML page rendered.
• Another Div which will contain the full page with v-cloak--hidden.
• Must have to add the css's given here.

Let's code - In Master Page,

 


  


   
 
      
      Loading...
   

   
 
      
      @yield('content')
   

  

With adding these Extra CSS's for v-cloak.

[v-cloak] .v-cloak--block {
  display: block;
}
[v-cloak] .v-cloak--inline {
  display: inline;
}
[v-cloak] .v-cloak--inlineBlock {
  display: inline-block;
}
[v-cloak] .v-cloak--hidden {
  display: none;
}
[v-cloak] .v-cloak--invisible {
  visibility: hidden;
}
.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
  display: none;
}

Then Before compiling the HTML file, a spinner will render. After compiled, spinner will hide. You can use this in your master page. Thus in every time when you load a new page, that will see the effects.

See the Gist - https://gist.github.com/adamwathan/3584d1904e4f4c36096f