最終更新日: 2023年08月15日

コンポーザブル ディレクトリ

Nuxt 3では、composables/ディレクトリを使用して、Vueのコンポーザブルを自動的にアプリケーションにインポートします。これは、自動的なインポートを利用しています。

裏側では、Nuxtは .nuxt/imports.d.ts というファイルを自動生成して型を宣言します。

Nuxtが型を生成するためには、nuxi prepare、nuxi dev、またはnuxi buildを実行する必要があることに注意してください。開発サーバーを起動せずにコンポーザブルを作成すると、TypeScriptが 'useBar' という名前が見つからないなどのエラーをスローします。

使用方法

方法1: 名前付きエクスポートを使用する

  • composables/useFoo.ts
  • ts
export const useFoo = () => {
  return useState("foo", () => "bar");
};

方法2: デフォルトエクスポートを使用する

  • composables/useFoo.ts
  • ts
// useFoo()として利用可能になります（拡張子を除いたファイル名のキャメルケース)
export default function () {
  return useState("foo", () => "bar");
}

使用方法: 現在、.js、.ts、および.vueファイルで自動的にインポートされたコンポーザブルを使用できます。

  • app.vue
  • ts
<script setup lang="ts">
  const foo = useFoo()
</script>

<template>
  <div>
    {{ foo }}
  </div>
</template>

事例

ネストされたコンポーザブル

自動インポートを使用して、別のコンポーザブル内でコンポーザブルを使用することができます:

  • composables/test.ts
  • ts
export const useFoo = () => {
  const nuxtApp = useNuxtApp();
  const bar = useBar();
};

プラグインのインジェクションにアクセスする

コンポーザブルからプラグインのインジェクションにアクセスできます:

  • app.vue
  • ts
export const useHello = () => {
  const nuxtApp = useNuxtApp();
  return nuxtApp.$hello;
};

ファイルのスキャンについて

Nuxtはcomposables/ディレクトリのトップレベルのファイルのみをスキャンします。例えば、次のようなファイルです:

  • app.vue
  • ts
composables
 | - index.ts // ○ スキャン
 | - useFoo.ts // ○ スキャン
 | - nested　// *フォルダ
 | --- utils.ts // × スキャンされない

composables/index.ts と composables/useFoo.ts のみがインポートの対象となります。

ネストされたモジュールに対して自動インポートを機能させるには、それらを再エクスポート（推奨）するか、あるいはスキャナーを設定してネストされたディレクトリを含めることができます。

例: composables/index.ts ファイルから必要なコンポーザブルを再エクスポートする方法:

  • app.vue
  • ts
// このエクスポートに対して自動インポートを有効にします
export {utils} from "./nested/utils.ts";

例: composables/フォルダ内のネストされたディレクトリをスキャンする方法:

  • nuxt.config.ts
  • ts
export default defineNuxtConfig({
  imports: {
    dirs: [
      // トップレベルのモジュールをスキャン
      "composables",
      // ある特定の名前とファイル拡張子を持つ、ネストされたモジュールをスキャン
      "composables/*/index.{ts,js,mjs,mts}",
      // 指定されたディレクトリ内のすべてのモジュールをスキャン
      "composables/**",
    ],
  },
});