@astrojs/ vue

このAstroインテグレーションは、Vue 3コンポーネントのレンダリングとクライアントサイドハイドレーションを有効にします。

インストール

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

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

npx astro add vue

pnpm astro add vue

yarn astro add vue

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

手動インストール

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

npm install @astrojs/vue

pnpm add @astrojs/vue

yarn add @astrojs/vue

ほとんどのパッケージマネージャーは、関連するピア依存関係もインストールします。Astroの起動時にCannot find package 'vue'（または同様の）警告が表示される場合は、Vueをインストールする必要があります。

npm install vue

pnpm add vue

yarn add vue

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

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue()],
});

はじめに

Astroで最初のVueコンポーネントを使用するには、UIフレームワークのドキュメントにアクセスしてください。以下について探求します。

📦 フレームワークコンポーネントがどのように読み込まれるか
💧 クライアントサイドハイドレーションのオプション
🤝 フレームワークを混在させてネストする機会

トラブルシューティング

ヘルプについては、Discordの#supportチャンネルをチェックしてください。フレンドリーなサポートチームのメンバーがお手伝いします！

インテグレーションの詳細については、Astroインテグレーションのドキュメントも確認してください。

貢献

このパッケージはAstroのコアチームによってメンテナンスされています。問題やPRの提出を歓迎します！

オプション

このインテグレーションは@vitejs/plugin-vueによって提供されています。Vueコンパイラをカスタマイズするには、インテグレーションにオプションを指定できます。詳細については、@vitejs/plugin-vueのドキュメントを参照してください。

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      template: {
        compilerOptions: {
          // ion-で始まるすべてのタグをカスタム要素として扱う
          isCustomElement: (tag) => tag.startsWith('ion-'),
        },
      },
      // ...
    }),
  ],
});

appEntrypoint

appEntrypointオプションをルートからの相対的なインポート指定子（例：appEntrypoint: "/src/pages/_app"）に設定することで、Vue appインスタンスを拡張できます。

このファイルのデフォルトエクスポートは、レンダリング前にVue Appインスタンスを受け入れる関数である必要があり、カスタムVueプラグイン、app.use、および高度なユースケースのためのその他のカスタマイズの使用を可能にします。

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
});

import type { App } from 'vue';
import i18nPlugin from 'my-vue-i18n-plugin';

export default (app: App) => {
  app.use(i18nPlugin);
};

jsx

jsx: trueを設定することで、Vue JSXを使用できます。

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ jsx: true })],
});

これにより、VueコンポーネントとVue JSXコンポーネントの両方のレンダリングが有効になります。Vue JSXコンパイラをカスタマイズするには、ブール値の代わりにオプションオブジェクトを渡します。詳細については、@vitejs/plugin-vue-jsxのドキュメントを参照してください。

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      jsx: {
        // ion-で始まるすべてのタグをカスタム要素として扱う
        isCustomElement: (tag) => tag.startsWith('ion-'),
      },
    }),
  ],
});

devtools

追加： @astrojs/vue@4.2.0

vue()インテグレーション設定にdevtools: trueを持つオブジェクトを渡すことで、開発中にVue DevToolsを有効にできます。

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ devtools: true })],
});

Vue DevToolsのカスタマイズ

追加： @astrojs/vue@4.3.0

さらにカスタマイズするには、代わりにVue DevTools Viteプラグインがサポートするオプションを渡すことができます。（注：appendToはサポートされていません。）

たとえば、Visual Studio Codeを使用していない場合は、launchEditorを好みのエディタに設定できます。

import { defineConfig } from "astro/config";
import vue from "@astrojs/vue";

export default defineConfig({
  // ...
  integrations: [
    vue({
      devtools: { launchEditor: "webstorm" },
    }),
  ],
});