composables

使用 composables/ 目录可以将你的 Vue 可组合函数（composables）自动导入到应用程序中。

使用

方法 1：使用命名导出（Named export）

app/composables/useFoo.ts
export const useFoo = () => {
  return useState('foo', () => 'bar')
}

方法 2：使用默认导出（Default export）

app/composables/use-foo.ts 或 composables/useFoo.ts
// It will be available as useFoo() (camelCase of file name without extension)
export default function () {
  return useState('foo', () => 'bar')
}

用法：你现在可以在 .js、.ts 和 .vue 文件中使用自动导入的可组合函数了。

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

<template>
  <div>
    {{ foo }}
  </div>
</template>
Nuxt 的 app/composables/ 目录本身不会为你的代码提供额外的响应式能力。相反，可组合函数中的任何响应式逻辑都是通过 Vue 的组合式 API（如 ref 和 reactive）实现的。请注意，响应式代码并不局限于 app/composables/ 目录。你可以在应用程序中任何需要的地方随意使用响应式功能。
在文档 > 4 X > 指南 > 概念 > 自动导入中了解更多信息。
在 文档 > 4.X > 示例 > 功能 > 自动导入 中阅读并编辑实时示例。

类型

在底层，Nuxt 会自动生成 .nuxt/imports.d.ts 文件来声明这些类型。

请注意，你需要运行 nuxt prepare、nuxt dev 或 nuxt build，以便让 Nuxt 生成相应的类型。

如果你在未运行开发服务器的情况下创建可组合函数，TypeScript 会抛出错误，例如 Cannot find name 'useBar'.。

示例

嵌套可组合函数

你可以通过自动导入在另一个可组合函数中使用某个可组合函数。

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

访问插件注入

你可以在可组合函数中访问 插件注入。

app/composables/test.ts
export const useHello = () => {
  const nuxtApp = useNuxtApp()
  return nuxtApp.$hello
}

文件扫描方式

Nuxt 仅扫描 app/composables/ 目录顶层的文件，例如：

目录结构
-| composables/
---| index.ts     // scanned
---| useFoo.ts    // scanned
---| nested/
-----| utils.ts   // not scanned

仅会搜索 app/composables/index.ts 和 app/composables/useFoo.ts 以获取导入。

要使嵌套模块支持自动导入，你可以选择重新导出它们（推荐），或者配置扫描器以包含嵌套目录。

示例：从 app/composables/index.ts 文件中重新导出你需要的可组合函数。

app/composables/index.ts
// Enables auto import for this export
export { utils } from './nested/utils.ts'

示例：扫描 app/composables/ 文件夹内的嵌套目录。

nuxt.config.ts
export default defineNuxtConfig({
  imports: {
    dirs: [
      // Scan top-level composables
      '~/composables',
      // ... or scan composables nested one level deep with a specific name and file extension
      '~/composables/*/index.{ts,js,mjs,mts}',
      // ... or scan all composables within given directory
      '~/composables/**',
    ],
  },
})