v-cloak: Hide Vue Until It's Ready
How to hide un-compiled Vue templates while loading.
Chapters
Transcript
There is one thing that Vue lets you do that is hiding your application while it's loading, because maybe sometimes it needs to do some processing.
v-cloak
So what we can do here is that we can set that for this tag that we put there on the description for every single child, we're going to have the display to be none. So these are not going to be shown.
Okay. So if we remove and hide this thing, this is hidden, right? We could say something more subtle, like opacity equals or 0.5, right? So you'll see what happens. This has this vehicle property until you mount your applications.
So when I mount this, so if I click this actually has the v-cloak property removed from the HTML and that shows, so one thing that we could do is that we could actually do set a timeout and put a function here, and maybe after one minute we do this instantiation one for application. We say that our app equals new Vue.
Right. So now we load and it takes one second until our application is mounted and this is good practice. Just because this allows you to do something pretty cool.
Loading...
For v-cloak what are we going to do is that before that item I'm going to add content and it's going to say Loading. And I'm going to put the opacity of that component is going to be 0.6 and check this out, right?
Now for that second, that is loading you can see this year and we can actually hide the other part of the code.
So now we have a loading mechanism for our grid, and this allows us to... when Vue actually takes time, maybe fetching information or doing something, or you have to do whatever before mounting, it's good to have these v-cloak property and some sort of loading sense to the user.
What happens here is that we are locally doing this and we are setting a manual timeout.
If I comment that you can see that we're not going to see any loading because Vue loads instantaneously. And we don't really have any delay, but if you had 250 milliseconds of delay you would see something like this.
Thanks!
It was Nono Martinez Alonso here.
Do check out the other playlists that go over how to build things with JavaScript and Laravel and web development on my channel.
Thanks a lot for watching and I'll see you next time.
I hope you learned something today.
Bye.