Nuxt3 中文课程《实战全栈开发简书》限时优惠

自动导入

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

Nuxt自动导入组件、组合式函数、辅助函数和Vue API,无需显式导入即可在整个应用程序中使用。

app.vue
<script setup lang="ts">
const count = ref(1) // ref会自动导入
</script>

由于Nuxt具有固定的目录结构,它可以自动导入components/composables/utils/

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

在文档中,通过Nuxt自动导入的每个函数都可以直接在代码中使用,无需显式导入。您可以在API部分找到关于自动导入的组件、组合式函数和实用程序的参考。
server目录中,Nuxt会自动从server/utils/导入导出的函数和变量。
您还可以通过配置nuxt.config文件的imports部分,自动导入自定义文件夹或第三方包导出的函数。

内置的自动导入

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

<script setup lang="ts">
/* useAsyncData()和$fetch()会自动导入 */
const { data, refresh, pending } = await useFetch('/api/hello')
</script>

Vue 3提供了响应性API,如refcomputed,以及生命周期钩子和助手函数,这些都会被Nuxt自动导入。

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

Vue和Nuxt的组合式函数

当您使用Vue和Nuxt提供的内置组合式函数时,请注意许多组合式函数依赖于在正确的_上下文_中调用。

在组件生命周期中,Vue通过全局变量跟踪当前组件的临时实例(类似地,Nuxt通过全局变量跟踪nuxtApp的临时实例),然后在同一时刻取消设置。这在服务器端渲染时非常重要,既可以避免跨请求状态污染(共享引用泄漏),也可以避免不同组件之间的泄漏。

这意味着(有极少数例外)您不能在Nuxt插件之外的地方使用它们,也不能在调用组合式函数之前使用await,除非在<script setup>块内、在使用defineNuxtComponent声明的组件的设置函数中、在defineNuxtPlugindefineNuxtRouteMiddleware中,在这些地方我们执行了一个转换,以保持同步上下文,即使在await之后也是如此。

如果您收到类似于“Nuxt实例不可用”的错误消息,那么很可能是在Vue或Nuxt生命周期中的错误位置调用了Nuxt组合式函数。

查看asyncContext实验性功能,以在异步函数中使用Nuxt组合式函数。
在此GitHub评论中查看完整的解释。

错误的代码示例:

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

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

正常的代码示例:

composables/example.ts
export const useMyComposable = () => {
  // 因为您的组合式函数在生命周期的正确位置被调用,
  // useRuntimeConfig也会正常工作
  const config = useRuntimeConfig()

  // ...
}

基于目录的自动导入

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

Read and edit a live example in Docs > Examples > Features > Auto Imports.

显式导入

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

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

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

自动导入的组件

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

Read more in Docs > Guide > Directory Structure > Components.

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

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

从第三方包自动导入

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

如果您正在使用该包的Nuxt模块,那么该模块很可能已经为该包配置了自动导入。

例如,您可以启用从vue-i18n包中自动导入useI18n组合式函数,如下所示:

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