composables
composables/ ディレクトリを使用して、Vue の composables をアプリケーションに自動インポートします。
使用法
方法 1: 名前付きエクスポートを使用
export const useFoo = () => {
return useState('foo', () => 'bar')
}
方法 2: デフォルトエクスポートを使用
// useFoo() として利用可能になります（拡張子を除いたファイル名のキャメルケース）
export default function () {
return useState('foo', () => 'bar')
}
使用法: 自動インポートされた composable を .js、.ts、.vue ファイルで使用できます
<script setup lang="ts">
const foo = useFoo()
</script>
<template>
<div>
{{ foo }}
</div>
</template>
Nuxt の app/composables/ ディレクトリは、コードに追加のリアクティビティ機能を提供しません。代わりに、composables 内のリアクティビティは、ref や reactive などの Vue の Composition API メカニズムを使用して実現されます。リアクティブなコードは app/composables/ ディレクトリの境界に限定されないことに注意してください。アプリケーション内で必要な場所でリアクティビティ機能を自由に使用できます。
型
内部では、Nuxt は .nuxt/imports.d.ts ファイルを自動生成して型を宣言します。
Nuxt が型を生成するためには、nuxt prepare、nuxt dev、または nuxt build を実行する必要があることに注意してください。
開発サーバーを実行せずに composable を作成すると、TypeScript は Cannot find name 'useBar'. のようなエラーを投げます。
例
ネストされた Composables
自動インポートを使用して、別の composable 内で composable を使用できます:
export const useFoo = () => {
const nuxtApp = useNuxtApp()
const bar = useBar()
}
プラグインのインジェクションにアクセス
composables から プラグインのインジェクション にアクセスできます:
export const useHello = () => {
const nuxtApp = useNuxtApp()
return nuxtApp.$hello
}
ファイルのスキャン方法
Nuxt は app/composables/ ディレクトリ のトップレベルのファイルのみをスキャンします。例:
-| composables/
---| index.ts // スキャンされる
---| useFoo.ts // スキャンされる
---| nested/
-----| utils.ts // スキャンされない
app/composables/index.ts と app/composables/useFoo.ts のみがインポートのために検索されます。
ネストされたモジュールの自動インポートを機能させるには、それらを再エクスポートする（推奨）か、スキャナーをネストされたディレクトリを含むように設定することができます:
例: 必要な composables を app/composables/index.ts ファイルから再エクスポートする:
// このエクスポートの自動インポートを有効にする
export { utils } from './nested/utils.ts'
例: app/composables/ フォルダ内のネストされたディレクトリをスキャンする:
export default defineNuxtConfig({
imports: {
dirs: [
// トップレベルの composables をスキャン
'~/composables',
// ... または特定の名前とファイル拡張子でネストされた composables をスキャン
'~/composables/*/index.{ts,js,mjs,mts}',
// ... または指定されたディレクトリ内のすべての composables をスキャン
'~/composables/**'
]
}
})
※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。
公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/4.x/guide/directory-structure/app/composables