An Alpine JS Screen Plugin lets you programmatically monitor changes to the size of the screen
<script src="/js/screen.min.js" defer></script>
<script src="/js/alpine.js" defer></script><!-- Alpine Plugins -->
<script src="https://unpkg.com/@victoryoalli/[email protected]/dist/screen.min.js" defer></script>
<!-- Alpine Core -->
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>npm i @victoryoalli/alpinejs-screenimport Alpine from 'alpinejs'
import screen from '@victoryoalli/alpinejs-screen'
Alpine.plugin(screen)
window.Alpine = Alpine
window.Alpine.start()Directive
<div x-data x-screen="alert('screen resized')"></div>Magic helpers
-
$widthThis magic helper will return window.outerWidth -
$heightThis magic helper will return window.outerHeight
Using $width magic helper
<html>
<script src="/js/screen.min.js" defer></script>
<script src="/js/alpine.js" defer></script>
<div x-screen="isMobile = ($width<1024)">
<span x-show="isMobile"> MOBILE </span>
</div>
</html>