コンテンツにスキップ

@astrojs/ alpinejs

このAstroインテグレーションは、Alpine.jsをプロジェクトに追加し、ページのどこでもAlpine.jsを使用できるようにします。

Astroには、公式インテグレーションのセットアップを自動化するastro addコマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールすることもできます。

@astrojs/alpinejsをインストールするには、プロジェクトディレクトリから次のコマンドを実行し、プロンプトに従ってください。

ターミナルウィンドウ
npx astro add alpinejs

問題が発生した場合は、GitHubで報告してください。そして、以下の手動インストール手順を試してください。

まず、@astrojs/alpinejsパッケージをインストールします。

ターミナルウィンドウ
npm install @astrojs/alpinejs

ほとんどのパッケージマネージャーは、関連するピア依存関係もインストールします。しかし、Astroの起動時にCannot find package 'alpinejs'(または同様の)警告が表示される場合は、Alpine.jsを自分で手動でインストールする必要があります。

ターミナルウィンドウ
npm install alpinejs @types/alpinejs

次に、integrationsプロパティを使用して、インテグレーションをastro.config.*ファイルに適用します。

astro.config.mjs
import { defineConfig } from 'astro/config';
import alpinejs from '@astrojs/alpinejs';
export default defineConfig({
// ...
integrations: [alpinejs()],
});

entrypointオプションをルートからの相対的なインポート指定子(例えば、entrypoint: "/src/entrypoint")に設定することで、Alpineを拡張できます。

このファイルのデフォルトエクスポートは、開始前にAlpineインスタンスを受け入れる関数である必要があります。これにより、高度なユースケースのためにカスタムディレクティブ、プラグイン、およびその他のカスタマイズを使用できます。

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

インテグレーションがインストールされると、Astroコンポーネント内でAlpine.jsのディレクティブと構文を使用できます。Alpine.jsスクリプトは自動的に追加され、ウェブサイトのすべてのページで有効になるため、クライアントディレクティブは必要ありません。プラグインスクリプトをページの<head>に追加します。

次の例では、AlpineのCollapseプラグインを追加して、段落テキストを展開および折りたたみます。

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">Toggle Content</button>
<p id="foo" x-show="expanded" x-collapse>
Lorem ipsum
</p>
</div>
</body>
</html>

@astrojs/alpineインテグレーションは、グローバルウィンドウオブジェクトにAlpineを追加します。IDEのオートコンプリートのために、src/env.d.tsに以下を追加します。

src/env.d.ts
interface Window {
Alpine: import('alpinejs').Alpine;
}
  • Astro Alpine.jsの例は、AstroプロジェクトでAlpine.jsを使用する方法を示しています。

他のインテグレーション

UIフレームワーク

SSRアダプター

その他

貢献する コミュニティ スポンサー