Auto imports

Nuxt自动导入辅助函数、composables和Vue API，以便在你的应用程序中使用，而不需要明确导入它们。基于目录结构，每个Nuxt应用程序也可以为自己的组件、composables和插件使用自动导入。组件、composables或插件可以使用这些函数。

与经典的全局声明相反，Nuxt保留了类型和IDE的补全和提示，只包括生产代码中实际使用的内容。

Nuxt Auto-imports

Nuxt 自动导入函数和 composables 以执行 数据获取, 获得对 app 上下文 和 运行时配置 的访问, 管理 状态 或定义组件和插件。

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

Vue Auto-imports

Vue 3 暴露的响应式 API，如 ref 或 computed , 以及生命周期钩子和helpers 都被Nuxt自动导入。

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

Directory-based Auto-imports

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

• components/ for Vue components.
• composables/ for Vue composables.

Explicit Imports

Nuxt用 #imports 别名公开了每一个自动导入，如果需要的话，可以用它来明确导入:

<script setup>  import { ref, computed } from '#imports'  const count = ref(1)  const double = computed(() => count.value * 2)</script>

Disable Auto-imports

如果你想禁用自动导入, 你可以设置 imports.autoImport 为 false.

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

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