Skip to content

@astrojs/ alpinejs

v0.3.2 GitHub npm Changelog

This Astro integration adds Alpine.js to your project so that you can use Alpine.js anywhere on your page.

Installation

Section titled Installation

Astro includes an astro add command to automate the setup of official integrations. If you prefer, you can install integrations manually instead.

To install @astrojs/alpinejs, run the following from your project directory and follow the prompts:

Terminal window
npx astro add alpinejs

If you run into any issues, feel free to report them to us on GitHub and try the manual installation steps below.

Manual Install

Section titled Manual Install

First, install the @astrojs/alpinejs package.

Terminal window
npm install @astrojs/alpinejs

Most package managers will install associated peer dependencies as well. However, if you see a “Cannot find package ‘alpinejs’” (or similar) warning when you start up Astro, you’ll need to manually install Alpine.js yourself:

Terminal window
npm install alpinejs @types/alpinejs

Then, apply the integration to your astro.config.* file using the integrations property:

astro.config.mjs
import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';


export default defineConfig({
  // ...
  integrations: [alpine()],
});

Usage

Section titled Usage

Once the integration is installed, you can use Alpine.js directives and syntax inside any Astro component. The Alpine.js script is automatically added and enabled on every page of your website.

Check our Astro Integration Documentation for more on integrations.

Note that you can use the CDN builds of plugins without any issues, just add them to the head:

src/pages/index.astro
<html>
  <head>
    <!-- ... -->
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
  </head>
  <body>
    <!-- ... -->
    <div x-data="{ expanded: false }">
      <button @click="expanded = ! expanded">Toggle Content</button>


      <p id="foo" x-show="expanded" x-collapse>
        Lorem ipsum
      </p>
    </div>
  </body>
</html>

Options

Section titled Options

entrypoint

Section titled entrypoint

You can extend Alpine by setting the entrypoint option to a root-relative import specifier (for example, entrypoint: "/src/entrypoint").

The default export of this file should be a function that accepts an Alpine instance prior to starting, allowing the use of custom directives, plugins and other customizations for advanced use cases.

astro.config.mjs
import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';


export default defineConfig({
  // ...
  integrations: [alpine({ entrypoint: '/src/entrypoint' })],
});
src/entrypoint.ts
import type { Alpine } from 'alpinejs'
import intersect from '@alpinejs/intersect'


export default (Alpine: Alpine) => {
    Alpine.plugin(intersect)
}

Intellisense for TypeScript

Section titled Intellisense for TypeScript

The integration adds Alpine to the global window object. If you want to access it while benefiting from your IDE autocompletion, add the following to your src/env.d.ts:

src/env.d.ts
interface Window {
  Alpine: import('alpinejs').Alpine;
}

Examples

Section titled Examples

More integrations

UI Frameworks

SSR Adapters

Other integrations