Aller au contenu

@astrojs/ alpinejs

v0.4.8 GitHub npm Journal des modifications

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

Installation

Titre de la section 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 :

Fenêtre du terminal
npx 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

Titre de la section Installation manuelle

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

Fenêtre du terminal
npm install @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 :

Fenêtre du terminal
npm install alpinejs @types/alpinejs

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

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


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

Options de configuration

Titre de la section Options de configuration

entrypoint

Titre de la section entrypoint

Vous pouvez étendre Alpine en définissant l’option entrypoint sur un spécificateur d’importation relatif à la racine (par exemple entrypoint: "/src/entrypoint").

L’exportation par défaut de ce fichier doit être une fonction qui accepte une instance Alpine avant de démarrer. Cela permet d’utiliser des directives personnalisées, des modules d’extension et d’autres personnalisations pour des cas d’utilisation avancés.

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)
}

Utilisation

Titre de la section 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, aucune directive client n’est donc nécessaire. Ajoutez les scripts du module d’extension dans la balise <head> de la page.

L’exemple suivant ajoute le module d’extension Collapse d’Alpine pour développer et réduire le texte d’un paragraphe.

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">Afficher/Masquer le contenu</button>


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

Intellisense pour TypeScript

Titre de la section Intellisense pour TypeScript

L’intégration @astrojs/alpine ajoute Alpine à l’objet global de la fenêtre. Pour l’autocomplétion de l’IDE, ajoutez ce qui suit à votre src/env.d.ts :

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

Exemples

Titre de la section Exemples

Plus d'intégrations

Framework d'interface utilisateur

Adaptateurs SSR

Autres intégrations

Contribuer Communauté Parrainer