自动导入

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

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

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

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

内置的自动导入

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

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

Vue 3提供了响应性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提供的内置组合式函数时，请注意许多组合式函数依赖于在正确的_上下文_中调用。

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

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

如果您收到类似于“Nuxt实例不可用”的错误消息，那么很可能是在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的显式导入。

自动导入的组件

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

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

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

从第三方包自动导入

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

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

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