@astrojs/ alpinejs
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 InstallationAstro 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 alpinejspnpm astro add alpinejsyarn astro add alpinejsSi 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 manuelleTout d’abord, installez le paquet @astrojs/alpinejs.
npm install @astrojs/alpinejspnpm add @astrojs/alpinejsyarn add @astrojs/alpinejsLa 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/alpinejspnpm add alpinejs @types/alpinejsyarn add alpinejs @types/alpinejsEnsuite, 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()],});Options de Configuration
Titre de la section Options de Configurationentrypoint
Titre de la section entrypointVous pouvez étendre Alpine en mettant l’option entrypoint à 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 plugins et d’autres personnalisations pour des cas d’utilisation avancés.
import { defineConfig } from 'astro/config';import alpine from '@astrojs/alpinejs';
export default defineConfig({ // ... integrations: [alpine({ entrypoint: '/src/entrypoint' })],});import type { Alpine } from 'alpinejs'import intersect from '@alpinejs/intersect'
export default (Alpine: Alpine) => { Alpine.plugin(intersect)}Utilisation
Titre de la section UtilisationUne 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 plugin à la page <head>.
L’exemple suivant ajoute le plugin Alpine’s Collapse pour développer et réduire le texte d’un paragraphe.
------<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">Toggle Content</button>
<p id="foo" x-show="expanded" x-collapse> Lorem ipsum </p> </div> </body></html>Intellisense pour TypeScript
Titre de la section Intellisense pour TypeScriptL’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 :
interface Window { Alpine: import('alpinejs').Alpine;}Exemples
Titre de la section Exemples- L’exemple Astro Alpine.js montre comment utiliser Alpine.js dans un projet Astro.
