自动导入

Nuxt 自动导入组件、组合式函数和 Vue.js API，以便在你的应用中无需显式导入即可使用。

<script setup lang="ts">
const count = ref(1) // ref 被自动导入
</script>

得益于其约定式的目录结构，Nuxt 可以自动导入你的 components/、composables/ 和 utils/ 目录中的内容。

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

内置自动导入

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

<script setup lang="ts">
/* useFetch() 被自动导入 */
const { data, refresh, status } = await useFetch('/api/hello')
</script>

Vue 提供了响应式 API（如 ref 或 computed），以及生命周期钩子和辅助函数，这些都被 Nuxt 自动导入。

<script setup lang="ts">
/* ref() 和 computed() 被自动导入 */
const count = ref(1)
const double = computed(() => count.value * 2)
</script>

Vue 和 Nuxt 组合式函数

在使用 Vue 和 Nuxt 提供的内置组合式 API 组合式函数时，请注意，许多组合式函数需要在正确的_上下文_中调用。

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

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

如果你遇到类似 Nuxt instance is unavailable 的错误信息，很可能是因为你在 Vue 或 Nuxt 生命周期的错误位置调用了 Nuxt 组合式函数。

错误代码示例：

// 在组合式函数之外尝试访问运行时配置
const config = useRuntimeConfig()

export const useMyComposable = () => {
  // 在此处访问运行时配置
}

正确代码示例：

export const useMyComposable = () => {
  // 因为你的组合式函数在生命周期的正确位置被调用，
  // useRuntimeConfig 在此处可以正常工作
  const config = useRuntimeConfig()

  // ...
}

基于目录的自动导入

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

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

显式导入

Nuxt 提供了 #imports 别名，可以用来显式导入每个自动导入的内容：

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

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

禁用自动导入

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

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

这将完全禁用自动导入，但仍然可以通过 #imports 进行显式导入。

部分禁用自动导入

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

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

在这种配置下：

• 框架函数（如 ref、computed 或 watch）无需手动导入即可使用。
• 自定义代码（如组合式函数）需要在文件中手动导入。

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

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