Useful CSS utilities for Vue.js cloaking

v-cloak.md

Handy helpers for controlling visibility of elements until Vue has compiled.

Use like:

<div v-cloak>
  <h1>
    <span class="v-cloak--inline">Loading...</span> <!-- Only displayed before compiling -->
    <span class="v-cloak--hidden">{{ post.title }}</span> <!-- Hidden until compiling is finished -->
  </h1>
</div>

Includes variations for block, inline, and inline-block display attributes.

[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;
}

Typo, in dispay ;)

The typo is on the line between the gods blocks "dispay attributes".
Great stuff you have shared, so simple but yet powerfull! 😄 thanks!

Thanks Adam! Just what I needed.

Thanks Adam! An info I skipped from reading the docs, it was very useful to me.

God bless.

Simple, But very useful. Thanks Adam..

Useful. Thanks

thanks too much

This is super useful thanks @adamwathan