Question

使用 composables/ 目录将您的 Vue 可组合项自动导入到您的应用程序中。

Nuxt 3 使用 composables/ 目录使用 auto-imports 自动将您的 Vue 可组合项导入您的应用程序！

在幕后，Nuxt 自动生成文件 .nuxt/imports.d.ts 来声明类型。

请注意，您必须运行 nuxi prepare 、 nuxi dev 或 nuxi build 才能让 Nuxt 生成类型。 如果您在开发服务器未运行的情况下创建可组合项，TypeScript 将抛出错误，例如“找不到名称 useBar 。”

使用方法

方法一： 使用命名导出

composables/useFoo.ts

export const useFoo = () => {
  return useState('foo', () => 'bar')
}

方法二： 使用默认导出

composables/use-foo.ts or composables/useFoo.ts

// 它将作为 useFoo() 提供（不带扩展名的文件名的驼峰式大小写）
export default function () {
  return useState('foo', () => 'bar')
}

用法： 您现在可以在 .js 、 .ts 和 .vue 文件中使用自动导入的可组合项

app.vue

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

<script setup>
const foo = useFoo()
</script>

示例

嵌套的可组合项

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

composables
 | - index.ts // scanned
 | - useFoo.ts // scanned
 | - nested
 | --- utils.ts // not scanned

只有 composables/index.ts 和 composables/useFoo.ts 会被搜索导入。

要让嵌套模块自动导入，您可以重新导出它们（推荐）或配置扫描器以包含嵌套目录：

示例： 从 composables/index.ts 文件中重新导出您需要的可组合项：

composables/index.ts

// 为此导出启用自动导入
export { utils } from './nested/utils.ts'

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

nuxt.config.ts

export default defineNuxtConfig({
  imports: {
    dirs: [
      // 扫描顶层模块
      'composables',
      // ... 或扫描模块嵌套一层，具有特定的名称和文件扩展名
      'composables/*/index.{ts,js,mjs,mts}',
      // ... 或扫描给定目录中的所有模块
      'composables/**'
    ]
  }
})