Posts Learn Components Snippets Categories Tags About
/

Install and Use Alpine JS Intersect Plugin

Learn how to integrate Alpine JS Intersect plugin

Created on Jul 26, 2021

88 views

Install Using Yarn / Npm
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

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

Load comments for Install and Use Alpine JS Intersect Plugin

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets

More