Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
@sergeifilippov

This comment has been minimized.

Copy link

@sergeifilippov sergeifilippov commented Jun 5, 2015

Typo, in dispay ;)

@blomdahldaniel

This comment has been minimized.

Copy link

@blomdahldaniel blomdahldaniel commented Jun 5, 2015

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

@xtrasmal

This comment has been minimized.

Copy link

@xtrasmal xtrasmal commented Dec 5, 2015

Thanks Adam! Just what I needed.

@valmayaki

This comment has been minimized.

Copy link

@valmayaki valmayaki commented Jan 29, 2016

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

@johnRivs

This comment has been minimized.

Copy link

@johnRivs johnRivs commented Feb 12, 2016

God bless.

@ManiruzzamanAkash

This comment has been minimized.

Copy link

@ManiruzzamanAkash ManiruzzamanAkash commented Oct 29, 2017

Simple, But very useful. Thanks Adam..

@marufmax

This comment has been minimized.

Copy link

@marufmax marufmax commented Jul 23, 2018

Useful. Thanks

@annymosse

This comment has been minimized.

Copy link

@annymosse annymosse commented Jul 11, 2019

thanks too much

@terryupton

This comment has been minimized.

Copy link

@terryupton terryupton commented Mar 13, 2020

This is super useful thanks @adamwathan

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment