Auto Imports

Nuxt 自动导入辅助函数、可组合项和 Vue API。

自动导入

Nuxt 自动导入辅助函数、可组合项和 Vue API 以在您的应用程序中使用,而无需显式导入它们。 基于目录结构,每个 Nuxt 应用程序还可以为其自己的组件、可组合项和插件使用自动导入。 组件、可组合项或插件可以使用这些函数。

与经典的全局声明相反,Nuxt 保留了类型和 IDE 的完成和提示,并且仅包含生产代码中实际使用的内容。

在文档中,每个未显式导入的函数都由 Nuxt 自动导入,并且可以在您的代码中按原样使用。 您可以在 API 部分找到自动导入的 composablesutilities 的参考。

服务器目录 中,我们自动导入从 server/utils/ 导出的函数和变量。

您还可以通过配置 nuxt.config 文件的 imports 部分 自动导入从自定义文件夹或第三方包导出的函数。

内置自动导入

来自Nuxt

Nuxt 自动导入函数和可组合项以执行数据获取,访问应用程序上下文runtime config,管理 state 或定义组件和插件。

vue
<script setup>
  /* useAsyncData() and $fetch() are auto-imported */
  const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch('/api/hello'))
</script>

来自Vue

Vue 3 公开了 Reactivity API,例如 refcomputed,以及由 Nuxt 自动导入的生命周期钩子和帮助程序。

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

来自Vue和Nuxt可组合项

当您使用 Vue 和 Nuxt 提供的内置 Composition API 可组合项时,请注意它们中的许多都依赖于在正确的_context_中被调用。

在组件生命周期中,Vue 通过全局变量跟踪当前组件的临时实例(类似地,Nuxt 跟踪 nuxtApp 的临时实例),然后在同一时间段内取消设置。 这在服务器渲染时是必不可少的,既可以避免交叉请求状态污染(泄漏两个用户之间的共享引用),也可以避免不同组件之间的泄漏。

这意味着(除了极少数例外)您不能在 Nuxt 插件、Nuxt 路由中间件或 Vue 设置函数之外使用它们。 最重要的是,您必须同步使用它们——也就是说,您不能在调用可组合项之前使用 await,除非在 <script setup> 块内,在使用 defineNuxtComponent 声明的组件的设置函数内,在 defineNuxtPlugin 或在 defineNuxtRouteMiddleware 中,我们执行转换以保持同步上下文,即使在 await 之后。

如果您收到类似Nuxt instance is unavailable的错误消息,那么这可能意味着您在 Vue 或 Nuxt 生命周期的错误位置调用了 Nuxt 可组合项。

请参阅此 评论 中的完整解释。

示例

中断代码示例:

composables/example.ts
// 尝试在可组合之外访问运行时配置
const config = useRuntimeConfig()

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

修复错误示例:

composables/example.ts
export const useMyComposable = () => {
  // 因为您的可组合项在生命周期中的正确位置被调用,
  // useRuntimeConfig 也可以
  const config = useRuntimeConfig()

  // ...
}

基于目录的自动导入

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

显式导入

Nuxt 使用 #imports 别名公开每个自动导入,如果需要,可用于显式导入:

vue
<script setup>
  import { ref, computed } from '#imports'

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

禁用自动导入

如果你想禁用自动导入,你可以在你的 nuxt.config.ts 中将 imports.autoImport 设置为 false

nuxt.config.ts
export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

这将完全禁用隐式自动导入,但仍然可以使用 显式导入

+This will disable auto-imports completely but it's still possible to use explicit imports from #imports.

Auto-imported Components

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

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

nuxt.config.ts
export default defineNuxtConfig({
  components: {
    dirs: []
  }
})