自动导入

Nuxt 自动导入组件、组合式函数和 Vue.js API，以便在您的应用程序中使用，而无需显式导入它们。

<script setup lang="ts">
const 
count
 = 
ref
(1) // ref is auto-imported
</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() and computed() are auto-imported */
const 
count
 = 
ref
(1)
const 
double
 = 
computed
(() => 
count
.
value
 * 2)
</script>

Vue 和 Nuxt 组合式函数

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

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

这意味着（除了极少数例外），您不能在 Nuxt 插件、Nuxt 路由中间件或 Vue setup 函数之外使用它们。最重要的是，您必须同步使用它们 - 也就是说，您不能在调用组合式函数之前使用await，除非在<script setup>块中，在用defineNuxtComponent声明的组件的 setup 函数中，在defineNuxtPlugin中或在defineNuxtRouteMiddleware中，我们在其中执行转换以在await之后保持同步上下文。

如果您收到类似Nuxt 实例不可用的错误消息，则可能表示您在 Vue 或 Nuxt 生命周期中的错误位置调用了 Nuxt 组合式函数。

错误代码示例

// trying to access runtime config outside a composable
const 
config
 = 
useRuntimeConfig
()

export const 
useMyComposable
 = () => {
  // accessing runtime config here
}

有效代码示例

export const 
useMyComposable
 = () => {
  // Because your composable is called in the right place in the lifecycle,
  // useRuntimeConfig will work here
  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']
      }
    ]
  }
})