loading...
Visibility eyes

Published: October 2020

The best way to use x-cloak in Alpine JS

To give you an easy explanation: x-cloak will be removed after Alpine JS initializes. Understood everything? But if you are still asking yourself why is this important - keep reading.

Markus A. Wolf

Author: Markus A. Wolf
Taipei / Taiwan – UX Designer and product owner - worked in Germany, California / Silicon Valley and now Taiwan for international clients.

First, it is possible to style HTML elements that have a specific attribute or attribute value and it looks like this: “[attribute]”.

This selector is used to select elements with a specified attribute. So with this selector you are able to define some CSS for every HTML tag having this x-cloak attribute.

Imagine you have a script in Alpine JS that fetches some data from an API and if the request was successful it will be shown on the screen. What will be shown before the data was fetched? What will be shown before the data can be fetched? Wouldn’t it be nice to have a way to show this HTML only if you can give some feedback to the user - like loading, error and success?

With x-cloak you can define a CSS like the following so the script will only be shown after Alpine JS was initialized. This means you can start with a loading animation and this animation will be the first HTML a user sees of your script. After Alpine JS is initialized everything is ready to go. Every method and param is working. Nobody wants to see HTML code before it gets rendered and filled with content.

<div x-data=”object” x-init=”function()” x-cloak >

  <!-- HTML -->

</div>
<style>

  [x-cloak] {
    display: none;
  }

</style>

<style>

  [x-cloak] {
    visibility: hidden;
    overflow: hidden
  }

</style>

If you have a fixed or defined height of your Alpine JS script / HTML and you don’t want to have a lot of “jumping” on your page replace display: none with: visibility: hidden.

Latest Alpine JS articles

Empire state building

Published: October 2020

How to get access to data from different Alpine JS components

In this article you will find two answers to this question and one of them feels right. So dive into the details and get things done the lean way.

Logo TA-Gallery

Updated: May 2020

TA-Gallery - responsive and mobile first image and content gallery

An image and content gallery which is 100% customizable and has endless CSS animation options. TA-Gallery is based on Alpine JS and uses Tailwind CSS + BEM methodology.