Alpine JS is here to stay and in this post I am going to show you some interesting plugins that you can use to extend the framework in case you are a bit short with the functions that it brings by default in your projects.

Intersect

The Intersect plugin provides a wrapper for the "Intersection Observer" which in a nutshell allows you to specify when an element is visible to do something...

The plugin makes it much easier and more intuitive to implement UI patterns like infinite scrolling and lazy loading images. Another great use case is to animate elements on the screen when a user scrolls to that section.

To use the plugin, follow the installation instructions that you can find on the official website, either via NPM or the CDN, then add the x-intersect attribute to an element with a callback that should be executed whenever that element "is called". junction" with the user viewport.

<div x-data = "{se muestra: falso}" x-intersect = "se muestra = verdadero">
   <div x-show = "mostrada" x-transición>
       ¡Estoy en la ventana!
   </div>
</div>

You can also use x-intersect:enter="callback" or x-intersect:leave="callback" if you want the callback to only be executed when the element respectively enters or leaves the user window.

Additionally, the plugin supports a .once modifier that can be used to indicate that the callback should only be executed the first time (a SINGLE time) that the element intersects the user's viewport.

<div x-intersect.once = "shown = true"> ... </div>

Persist

The Persist plugin provides a magic method to integrate data with Alpine into localStorage.

To use the plugin, follow the installation instructions, then wrap your initial data values in $persist(). Then Alpine will know to "keep" those values, and any updates to those values, in localStorage. On subsequent page loads, Alpine will pull those values from localStorage instead of initializing them with the default values.

<div x-data="{ count: $persist(0) }">
   <button x-on:click="count++">Increment</button>

   <span x-text="count"></span>
</div>