自动导入

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

Nuxt 会自动导入组件、组合式函数以及 Vue.js API，让你可以在整个应用中直接使用而无需显式导入它们。

app/app.vue

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

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

与传统的全局声明不同，Nuxt 保留了类型、IDE 补全和提示，并且只会包含你生产代码中实际用到的内容。

在文档中，每个没有被显式导入的函数都是被 Nuxt 自动导入的，可以直接原样在你的代码中使用。你可以在 API 章节找到自动导入组件、组合式函数和工具函数的参考。

在 server 目录中，Nuxt 会自动导入从 server/utils/ 导出的函数和变量。

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

内置自动导入

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

<script setup lang="ts">
/* useFetch() 是自动导入的 */
const { data, refresh, status } = await useFetch('/api/hello')
</script>

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

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

这意味着（极少数例外）你无法在 Nuxt 插件、Nuxt 路由中间件或 Vue setup 函数之外使用它们。除此之外，你必须同步地使用它们——也就是说，不能在调用组合式函数之前使用 await，除非在 <script setup> 块内、在使用 defineNuxtComponent 声明的组件的 setup 函数中、defineNuxtPlugin 中或 defineNuxtRouteMiddleware 中，在这些地方我们进行了转换以在 await 之后仍然保持同步上下文。

如果你收到类似 Nuxt instance is unavailable（Nuxt 实例不可用）的错误消息，那么很可能意味着你在 Vue 或 Nuxt 生命周期的错误位置调用了 Nuxt 组合式函数。