Recheck conditions on window.resize

[broskees]

Is it possible to make alpine check this condition again on screen resize? For example:

<div class="example-block" x-data="{isMobile: (window.innerWidth < 1024) ? true : false}">
    <div x-show="isMobile">
      I see you're on mobile
    </div>
</div>

[Tim-Wils]

You van use x-on:resize.window

<div x-on:resize.window="isMobile = (window.innerWidth < 1024) ? true : false" class="example-block" x-data="{isMobile: (window.innerWidth < 1024) ? true : false}">
    <div x-show="isMobile">
      I see you're on mobile
    </div>
</div>

[broskees]

Beautiful!

[SimoTod]

You probably want to add the debounce modifier since the resize event will be fired multiple times for a single action: https://alpinejs.dev/directives/on#debounce