Skip to content

Instantly share code, notes, and snippets.

@kharysharpe
Forked from adamwathan/v-cloak.md
Created January 2, 2019 00:43
Show Gist options
  • Save kharysharpe/eb94ceb8a02c1f01d89f6348b0b175fc to your computer and use it in GitHub Desktop.
Save kharysharpe/eb94ceb8a02c1f01d89f6348b0b175fc to your computer and use it in GitHub Desktop.
Useful CSS utilities for Vue.js cloaking

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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment