自动导入

Nuxt 会自动导入组件、composables 和 Vue.js APIs，在整个应用中使用时无需显式导入。

<script setup lang="ts">
const count = ref(1) // ref is auto-imported
</script>

得益于其有针对性的目录结构，Nuxt 可以自动导入你的 app/components/、app/composables/ 和 app/utils/。

与传统的全局声明不同，Nuxt 会保留类型信息、IDE 自动补全和提示，并且仅包含在生产代码中实际使用的内容。

内置自动导入

Nuxt 会自动导入用于执行 数据获取、访问 应用上下文 和 运行时配置、管理 状态 或定义组件和插件的函数与 composables。

<script setup lang="ts">
/* useFetch() is auto-imported */
const { data, refresh, status } = await useFetch('/api/hello')
</script>

Vue 提供像 ref 或 computed 这样的响应性 API，以及生命周期钩子和辅助函数，这些都会被 Nuxt 自动导入。

<script setup lang="ts">
/* ref() and computed() are auto-imported */
const count = ref(1)
const double = computed(() => count.value * 2)
</script>

Vue 与 Nuxt 的 Composables

当你使用由 Vue 和 Nuxt 提供的内置 Composition API composables 时，请注意其中许多依赖在正确的上下文（context）中被调用。

在组件生命周期期间，Vue 会通过一个全局变量追踪当前组件的临时实例（类似地，Nuxt 会追踪 nuxtApp 的临时实例），并在同一 tick 内取消设置它。这在服务器渲染时至关重要，既能避免跨请求状态污染（在两个用户之间泄露共享引用），也能避免在不同组件之间的泄漏。

这意味着（极少数情况除外）你不能在 Nuxt 插件、Nuxt 路由中间件或 Vue 的 setup 函数之外使用它们。除此之外，你必须同步使用它们——也就是说，不能在调用 composable 之前使用 await，除非是在 <script setup> 块中、使用 defineNuxtComponent 声明组件的 setup 函数中、在 defineNuxtPlugin 中或在 defineNuxtRouteMiddleware 中，这些场景会进行一次转换以在 await 之后仍保持同步上下文。

如果你收到类似 Nuxt instance is unavailable 的错误消息，那么很可能表示你在 Vue 或 Nuxt 生命周期的错误位置调用了 Nuxt composable。

错误代码示例：

// trying to access runtime config outside a composable
const config = useRuntimeConfig()

export const useMyComposable = () => {
  // accessing runtime config here
}

可行代码示例：

export const useMyComposable = () => {
  // Because your composable is called in the right place in the lifecycle,
  // useRuntimeConfig will work here
  const config = useRuntimeConfig()

  // ...
}

基于目录的自动导入

Nuxt 会直接自动导入在指定目录中创建的文件：

• app/components/ 用于 Vue 组件。
• app/composables/ 用于 Vue composables。
• app/utils/ 用于辅助函数和其他工具。

显式导入

Nuxt 为每个自动导入暴露了 #imports 别名，如果需要可以使用它来显式导入：

<script setup lang="ts">
import { computed, ref } from '#imports'

const count = ref(1)
const double = computed(() => count.value * 2)
</script>

禁用自动导入

如果你想禁用对 composables 和工具函数的自动导入，可以在 nuxt.config 文件中将 imports.autoImport 设置为 false。

export default defineNuxtConfig({
  imports: {
    autoImport: false,
  },
})

这将完全禁用自动导入，但仍然可以从 #imports 使用显式导入。

部分禁用自动导入

如果你希望像 ref 这样的框架特定函数仍保持自动导入，但希望禁用对你自己的代码（例如自定义 composables）的自动导入，可以在 nuxt.config.ts 文件中将 imports.scan 选项设置为 false：

export default defineNuxtConfig({
  imports: {
    scan: false,
  },
})

使用此配置：

• 像 ref、computed 或 watch 这样的框架函数仍然可以在不手动导入的情况下使用。
• 自定义代码（例如 composables）则需要在文件中手动导入。

自动导入组件

Nuxt 也会自动从你的 ~/components 目录导入组件，尽管这是与自动导入 composables 和工具函数分别配置的。

要禁用从你自己的 ~/components 目录自动导入组件，你可以将 components.dirs 设置为空数组（但请注意，这不会影响由模块添加的组件）。

export default defineNuxtConfig({
  components: {
    dirs: [],
  },
})

从第三方包自动导入

Nuxt 也允许从第三方包中进行自动导入。

例如，你可以像下面这样启用从 vue-i18n 包自动导入 useI18n composable：

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: 'vue-i18n',
        imports: ['useI18n'],
      },
    ],
  },
})