تخطَّ إلى المحتوى

@astrojs/ alpinejs

هذا المحتوى لا يتوفر بلغتك بعد.

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

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.

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()],
});

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.

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:

src/pages/index.astro
---
---
<!-- Example: Load AlpineJS on a single page. -->
<script>
import Alpine from 'alpinejs';
// Optional: Extend Alpine.js
// Alpine.directive('foo', ...)
window.Alpine = Alpine;
Alpine.start();
</script>

The Alpine.js integration does not support any custom configuration at this time.

More integrations

أطر عمل الواجهات

محولات تصيير على الخادم SSR

أخرى