自动导入

Nuxt 自动导入组件、可组合项和Vue.js API以便在整个应用程序中使用，无需显式导入它们。

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

得益于其固定的目录结构，Nuxt 可以自动导入您的 app/components/、app/composables/ 和 app/utils/。

与经典的全局声明不同，Nuxt 保留了类型、IDE 补全和提示，并且只包含您生产代码中使用的内容。

内置自动导入

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

<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 可组合项

当您使用 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 可组合项。

破坏性代码示例

// 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 可组合项。
• app/utils/ 用于辅助函数和其他实用工具。

显式导入

Nuxt 通过 #imports 别名暴露每个自动导入，如果需要，可以使用它进行显式导入

<script setup lang="ts">
import { computed, ref } 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 这样的框架函数仍然可以无需手动导入而正常工作。
• 自定义代码，例如可组合项，将需要在您的文件中手动导入。

自动导入组件

Nuxt 还会自动从您的 ~/components 目录导入组件，尽管这与自动导入可组合项和实用函数是单独配置的。

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

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

从第三方包自动导入

Nuxt 还允许从第三方包自动导入。

例如，您可以像这样启用从 vue-i18n 包自动导入 useI18n 可组合项

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