DEV Community

Discussion on: Kentico Xperience Xplorations: Why We Should Be Using AlpineJs

View post
Collapse
 
philw_ profile image
Phil Wolstenholme •

Rather than use inline styles like this:

<span
  style="display: none"
  x-show="error"
></span>
Enter fullscreen mode Exit fullscreen mode

…an alternative is to use x-cloak, like this:

<span
  x-cloak
  x-show="error"
></span>
Enter fullscreen mode Exit fullscreen mode

x-cloak will be removed once Alpine has run, so we can team it up with a CSS rule like this one:

[x-cloak] {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

…to hide content until Alpine has had a chance to execute and for x-show to have done its thing.

Collapse
 
seangwright profile image
Sean G. Wright •

Oooh, that's an awesome tip! Thanks @philw_ !

Although I haven't had a chance to use it yet, I'm very excited about Alpine v3 now that Spruce has been replaced with a built-in store.