@astrojs/ alpinejs
このAstroインテグレーション (EN)は、Alpine.jsをプロジェクトに追加し、ページのどこでもAlpine.jsを使用できるようにします。
インストール
Astroには、公式インテグレーションのセットアップを自動化するastro addコマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールすることもできます。
@astrojs/alpinejsをインストールするには、プロジェクトディレクトリから次のコマンドを実行し、プロンプトに従ってください。
npx astro add alpinejs pnpm astro add alpinejs yarn astro add alpinejs問題が発生した場合は、GitHubで報告してください。そして、以下の手動インストール手順を試してください。
手動インストール
まず、@astrojs/alpinejsパッケージをインストールします。
npm install @astrojs/alpinejs pnpm add @astrojs/alpinejs yarn add @astrojs/alpinejsほとんどのパッケージマネージャーは、関連するピア依存関係もインストールします。しかし、Astroの起動時にCannot find package 'alpinejs'（または同様の）警告が表示される場合は、Alpine.jsを自分で手動でインストールする必要があります。
npm install alpinejs @types/alpinejspnpm add alpinejs @types/alpinejsyarn add alpinejs @types/alpinejs次に、integrationsプロパティを使用して、インテグレーションをastro.config.*ファイルに適用します。
import { defineConfig } from 'astro/config';
import alpinejs from '@astrojs/alpinejs';
export default defineConfig({
// ...
integrations: [alpinejs()],
});設定オプション
entrypoint
Type: string
@astrojs/alpinejs@0.4.0
entrypointオプションをルートからの相対的なインポート指定子（例えば、entrypoint: "/src/entrypoint"）に設定することで、Alpineを拡張できます。
このファイルのデフォルトエクスポートは、開始前にAlpineインスタンスを受け入れる関数である必要があります。これにより、高度なユースケースのためにカスタムディレクティブ、プラグイン、およびその他のカスタマイズを使用できます。
import { defineConfig } from 'astro/config';
import alpinejs from '@astrojs/alpinejs';
export default defineConfig({
// ...
integrations: [alpinejs({ entrypoint: '/src/entrypoint' })],
});import type { Alpine } from 'alpinejs'
import intersect from '@alpinejs/intersect'
export default (Alpine: Alpine) => {
Alpine.plugin(intersect)
}使い方
インテグレーションがインストールされると、Astroコンポーネント内でAlpine.jsのディレクティブと構文を使用できます。Alpine.jsスクリプトは自動的に追加され、ウェブサイトのすべてのページで有効になるため、クライアントディレクティブは必要ありません。プラグインスクリプトをページの<head>に追加します。
次の例では、AlpineのCollapseプラグインを追加して、段落テキストを展開および折りたたみます。
---
---
<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>TypeScriptのインテリセンス
@astrojs/alpineインテグレーションは、グローバルウィンドウオブジェクト (EN)にAlpineを追加します。IDEのオートコンプリートのために、src/env.d.tsに以下を追加します。
interface Window {
Alpine: import('alpinejs').Alpine;
}例
- Astro Alpine.jsの例は、AstroプロジェクトでAlpine.jsを使用する方法を示しています。
