@astrojs/ alpinejs

v0.3.2 GitHub npm Changelog

Cette intégration Astro ajoute Alpine.js à votre projet afin que vous puissiez utiliser Alpine.js n’importe où sur votre page.

Installation

Astro inclut une commande astro add pour automatiser l’installation des intégrations officielles. Si vous préférez, vous pouvez installer les intégrations manuellement à la place.

Pour installer @astrojs/alpinejs, exécutez ce qui suit depuis le répertoire de votre projet et suivez les instructions :

npx astro add alpinejs

pnpm astro add alpinejs

yarn astro add alpinejs

Si vous rencontrez des problèmes, n’hésitez pas à nous les signaler sur GitHub et essayez les étapes d’installation manuelle ci-dessous.

Installation manuelle

Tout d’abord, installez le paquet @astrojs/alpinejs.

npm install @astrojs/alpinejs

pnpm add @astrojs/alpinejs

yarn add @astrojs/alpinejs

La plupart des gestionnaires de paquets installent également les dépendances associées. Cependant, si vous voyez un avertissement “Cannot find package ‘alpinejs’” (ou similaire) lorsque vous démarrez Astro, vous devrez installer manuellement Alpine.js vous-même :

npm install alpinejs @types/alpinejs

pnpm add alpinejs @types/alpinejs

yarn add alpinejs @types/alpinejs

Ensuite, appliquez l’intégration à votre fichier astro.config.* en utilisant la propriété integrations :

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

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

Utilisation

Une fois l’intégration installée, vous pouvez utiliser les directives et la syntaxe Alpine.js dans n’importe quel composant Astro. Le script Alpine.js est automatiquement ajouté et activé sur chaque page de votre site web.

Consultez notre Documentation d’intégration Astro pour plus d’informations sur les intégrations.

Limites

L’intégration d’Alpine.js ne vous permet pas de contrôler la manière dont le script est chargé ou initialisé. Si vous avez besoin de ce contrôle, envisagez d’installer et d’utiliser Alpine.js manuellement. Astro prend en charge toutes les instructions d’installation manuelle d’Alpine.js officiellement documentées, en utilisant les balises <script> à l’intérieur d’un composant Astro.

Il n’est actuellement pas possible d’étendre Alpine.js en utilisant ce composant. Si vous avez besoin de cette fonctionnalité, envisagez de suivre le manuel d’installation d’Alpine.js au lieu d’utiliser une balise de script Astro :

---
---

<!-- Exemple : Charger AlpineJS sur une seule page. -->
<script>
  import Alpine from 'alpinejs';

  // Optionnel: Étendre Alpine.js
  // Alpine.directive('foo', ...)

  window.Alpine = Alpine;
  Alpine.start();
</script>