@astrojs/alpinejs

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

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:

```sh npx astro add alpinejs ``` ```sh pnpm astro add alpinejs ``` ```sh yarn 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

First, install the @astrojs/alpinejs package.

```sh npm install @astrojs/alpinejs ``` ```sh pnpm add @astrojs/alpinejs ``` ```sh yarn add @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:

```sh npm install alpinejs @types/alpinejs ``` ```sh pnpm add alpinejs @types/alpinejs ``` ```sh yarn add alpinejs @types/alpinejs ```

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

Configuration Options

entrypoint

Type: string

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

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

}

Examples

• The Astro Alpine.js example shows how to use Alpine.js in an Astro project.