How to prevent alpine.js modal from showing every time i refresh the page

Question

i'm using alpine.js for my project and I have a modal that works well with alpine.js, my problem is that whenever you refresh the page, it shows for a second or two (while the page loads) and then goes away. I don't want to see it onload. Is there any way to workaround that in alpine.js?

My code

// Initialize data
<body x-data="{openModal: false}"
 :class="openModal ? 'overflow-hidden' : 'overflow-visible'"
>

// button
<button @click="openModal = true">
Open Modal
</button>
<!-- Modal -->
<div x-show="openModal">
<!-- content --> 
</div>
</body>

Hugo · Answer 1 · 2020-10-20T11:08:10.917

20

You're looking for the x-cloak directive.

It's a very simple one, it gets removed from the component when Alpine starts up.

So in your case you can add the following style (which will hide elements with the x-cloak attribute) and add x-cloak to your Alpine.js component (in this case the body).

<style>
[x-cloak] { display: none }
</style>
<body x-cloak x-data="{openModal: false}"
 :class="openModal ? 'overflow-hidden' : 'overflow-visible'"
>

// button
<button @click="openModal = true">
Open Modal
</button>
<!-- Modal -->
<div x-show="openModal">
<!-- content --> 
</div>
</body>

edited Oct 20 '20 at 11:08

answered Oct 19 '20 at 19:06

Hugo

3,500
1
14
28

It doesn't seem to work for me. In my head i have my css, my alpine.js script tag and underneath I put your suggestion. – codemebro Oct 19 '20 at 19:31
1

Nvm i got it, didn't notice that you added x-cloak to body, my bad. – codemebro Oct 19 '20 at 20:20
Yep, maybe I'll update the answer to make it clearer – Hugo Oct 20 '20 at 11:07

score 10 · Answer 2 · answered Jan 08 '21 at 15:50

10

x-cloak is the right answear! But to be on the safe side in more cases, use the css important rule.

<style>
  [x-cloak] { 
      display: none !important;
   }
</style>

answered Jan 08 '21 at 15:50

Maik Lowrey

15,957
6
40
79

2

that's works... thanks – Dedi Ananto Jan 24 '22 at 13:50

score 2 · Answer 3 · answered Nov 29 '22 at 10:28

Apart from the x-clock solution, another solution is to wrap the content you want to control in a <template> tag with an x-if="true" parameter.
Check the code below.

<template x-if="true">
  <div x-show="openModal">
    <!-- content --> 
  </div>
</template>

This works because <template> elements are "hidden" in browsers by default, you won't see the <div> until Alpine has had a chance to render the x-if="true" and show it as the docs describe here

How to prevent alpine.js modal from showing every time i refresh the page

3 Answers3