To install Alpine Js intersect plugin use yarn / npm.
yarn add @alpinejs/intersect npm install @alpinejs/intersect
Initialize the Plugin
Then initialize it from your bundle.
import Alpine from 'alpinejs' import intersect from '@alpinejs/intersect' Alpine.plugin(intersect)
Use the Plugin
To use the plugin just call the x-intersect directive and now once the user sees the section / intersect, the code will run.
<div x-data x-intersect="console.log('hello world')"> <!-- your content here --> </div> <div x-data x-intersect="@this.call('loadMoreData')"> <!-- your content here --> </div>
Related Snippet
Leave a reply