This Astro integration adds Alpine.js to your project so that you can use Alpine.js anywhere on your page.
InstallationSection titled Installation
Quick InstallSection titled Quick Install
astro add command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren’t sure which package manager you’re using, run the first command.) Then, follow the prompts, and type “y” in the terminal (meaning “yes”) for each one.
If you run into any issues, feel free to report them to us on GitHub and try the manual installation steps below.
Manual InstallSection titled Manual Install
First, install the
@astrojs/alpinejs package using your package manager. If you’re using npm or aren’t sure, run this in the terminal:
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:
Then, apply this integration to your
astro.config.* file using the
UsageSection 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.
LimitationsSection titled Limitations
The Alpine.js integration does not give you control over how the script is loaded or initialized. If you require this control, consider installing and using Alpine.js manually. Astro supports all officially documented Alpine.js manual setup instructions, using
<script> tags inside of an Astro component.
It is not currently possible to extend Alpine.js when using this component. If you need this feature, consider following the manual Alpine.js setup instead using an Astro script tag:
ConfigurationSection titled Configuration
The Alpine.js integration does not support any custom configuration at this time.
ExamplesSection titled Examples
- The Astro Alpine.js example shows how to use Alpine.js in an Astro project.
TroubleshootingSection titled Troubleshooting
For help, check out the
#support channel on Discord. Our friendly Support Squad members are here to help!
You can also check our Astro Integration Documentation for more on integrations.
ContributingSection titled Contributing
This package is maintained by Astro’s Core team. You’re welcome to submit an issue or PR!
ChangelogSection titled Changelog
See CHANGELOG.md for a history of changes to this integration.