自动导入

Nuxt 自动导入应用程序中使用的组件、组合器和 Vue.js API，无需显式导入。

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

由于其有明确的目录结构，Nuxt 可以自动导入您的 components/、composables/ 和 utils/。

与经典的全局声明相反，Nuxt 保留了类型信息、IDE 完成和提示，并且 仅包含在生产代码中使用的部分。

内置自动导入

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

<script setup lang="ts">
/* useFetch() is auto-imported */
const { 
data
, 
refresh
, 
status
 } = await 
useFetch
('/api/hello')
</script>

Vue 3 公开了诸如 ref 或 computed 之类的响应式 API，以及生命周期钩子和帮助器，它们被 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 的临时实例），然后在同一tick中取消设置它。这对于服务器端渲染至关重要，既避免了跨请求状态污染（在两个用户之间泄露共享引用），也避免了不同组件之间泄漏。

这意味着（除了很少的例外）您不能在 Vue 或 Nuxt 生命周期的正确位置之外使用它们。此外，您必须在同步调用它们之前使用 await，除了在 <script setup> 块中，在 defineNuxtComponent 声明的组件的 setup 函数中，在 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']
      }
    ]
  }
})