コンテンツにスキップ

@astrojs/ alpinejs

v0.4.8 GitHub npm チェンジログ

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

インストール

Section titled “インストール”

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

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

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

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

手動インストール

Section titled “手動インストール”

まず、@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()],
});

設定オプション

Section titled “設定オプション”

entrypoint

Section titled “entrypoint”

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

使い方

Section titled “使い方”

インテグレーションがインストールされると、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>

TypeScriptのインテリセンス

Section titled “TypeScriptのインテリセンス”

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

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

例

Section titled “例”
  • Astro Alpine.jsの例は、AstroプロジェクトでAlpine.jsを使用する方法を示しています。

他のインテグレーション

UIフレームワーク

SSRアダプター

その他

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