v-cloak

Hiding {{tags}} before app load. Tip #17

Before Vue mount into the page, you can see the unparsed {{tags}} for a fraction of a second.

v-cloak is a attribute that you can add to a element you want to hide, while Vue is mounting.

Soon as Vue is ready, this attribute is removed.

See how it looks without v-cloak:

To simulate a loading, I'm delaying Vue startup until you press the button.

v-cloak alone can't do anything, you need to create a css to format it. The most common used is this:

[v-cloak] {display: none}

But I want to show you a different one:

[v-cloak] > * { display:none }
[v-cloak]::before { content: "loading…" }

Here we're hiding the content of v-cloak, but displaying a message "loading…" instead. See for yourself:

If you need to show a loading gif, you must use a inline base64 image:

Things to remember

1. v-cloak does not work while loading your remote data, just the Vue app.
2. Don't try to load external content like images inside v-cloak css, it probably will boot before the content finish load.
3. You can use as many as you want, it's just a css attribute selector.

How are you using v-cloak? Let me know in the comments below.