@astrojs/ alpinejs
このAstroインテグレーションは、Alpine.jsをプロジェクトに追加し、ページのどこでもAlpine.jsを使用できるようにします。
インストール
Section titled “インストール”Astroには、公式インテグレーションのセットアップを自動化するastro add
コマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールすることもできます。
@astrojs/alpinejs
をインストールするには、プロジェクトディレクトリから次のコマンドを実行し、プロンプトに従ってください。
npx astro add alpinejs
pnpm astro add alpinejs
yarn astro add alpinejs
問題が発生した場合は、GitHubで報告してください。そして、以下の手動インストール手順を試してください。
手動インストール
Section titled “手動インストール”まず、@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/alpinejs
pnpm add alpinejs @types/alpinejs
yarn add alpinejs @types/alpinejs
次に、integrations
プロパティを使用して、インテグレーションをastro.config.*
ファイルに適用します。
import { defineConfig } from 'astro/config';import alpinejs from '@astrojs/alpinejs';
export default defineConfig({ // ... integrations: [alpinejs()],});
設定オプション
Section titled “設定オプション”entrypoint
Section titled “entrypoint”entrypoint
オプションをルートからの相対的なインポート指定子(例えば、entrypoint: "/src/entrypoint"
)に設定することで、Alpineを拡張できます。
このファイルのデフォルトエクスポートは、開始前にAlpineインスタンスを受け入れる関数である必要があります。これにより、高度なユースケースのためにカスタムディレクティブ、プラグイン、およびその他のカスタマイズを使用できます。
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)}
インテグレーションがインストールされると、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のインテリセンス
Section titled “TypeScriptのインテリセンス”@astrojs/alpine
インテグレーションは、グローバルウィンドウオブジェクトにAlpine
を追加します。IDEのオートコンプリートのために、src/env.d.ts
に以下を追加します。
interface Window { Alpine: import('alpinejs').Alpine;}
- Astro Alpine.jsの例は、AstroプロジェクトでAlpine.jsを使用する方法を示しています。