Nuxt会自动导入组件、函数和vue的api 例如
<script setup lang="ts">
const count = ref(1) // ref is auto-imported
</script>
这些目录下面的东西也是自动导入的
componenets,composables ,utils
在教程文档中，没有显示导入的函数都是自动导入的。你复制之后也是可以直接收纳柜用的。你可以在API部分的教程中看到他们
在server目录中，Nuxt自动导入server/utils/中导出的函数和变量。
通过配置nuxt的imports部分，您还可以自动导入从自定义文件夹或第三方包导出的函数。配置文件。
内置的自动导入
会自动导入Nuxt 的各种函数，也会自动导入Vue的各种api
vue和Nuxt的组合式函数
当你在使用Vue和Nuxt的内置API的时候，一定要注意使用的时候，要在正确的上下文位置使用。
因为在组件的生命周期中，Vue和Nuxt都通过一些全局变量跟踪他们的实例。并在在同一个tick中将其清除。
这对于服务器渲染很重要，既可以避免不同用户在请求的时候污染了状态，也可以避免不同组件之间的泄漏
这就意味着，Nuxt框架要求你使用这些Composables（极少数例外）的时候，只在<script setup>，defineNuxtComponent声明的组件的setup函数中，defineNuxtPlugin和defineNuxtRouteMiddleware内使用。在这些地方，你可以使用await关键字使得这个函数变成异步。
而除了上面说的这些地方，你很少能用composables，即便用了，也不能使用await关键字！
如果你收到Nuxt instance is unavailable这种警告，这偶就意味着你写错了
错误例子 如果在composables声明了example.ts
// trying to access runtime config outside a composable
const config = useRuntimeConfig()
export const useMyComposable = () => {
// accessing runtime config here
}
然后在app.vue中使用useMyComposable，这是错误的因为useRuntimeConfig在一个不合适的地方调用了
正确例子
export const useMyComposable = () => {
// Because your composable is called in the right place in the lifecycle,
// useRuntimeConfig will work here
const config = useRuntimeConfig()
// ...
}
基于目录的自动导入
位于下面的文件将都会被导入
- componenets
- composables
- utils
自动导入的ref或者是computed对象不可以自动解包，详情看vue的文档.
显示导入
Nuxt会使用#imports别名暴露所有的自动导入，你可以显示使用他们
<script setup lang="ts">
import { ref, computed } from '#imports'
const count = ref(1)
const double = computed(() => count.value * 2)
</script>
禁止自动导入
如果你需要禁止这个自动导入的特性，你可以去配置
export default defineNuxtConfig({
imports: {
autoImport: false
}
})
自动导入组件
Nuxt会自动导入componenets目录下的组件，但是你也可以手动指定一个目录数组
export default defineNuxtConfig({
components: {
dirs: []
}
})
自动导入第三方的组件
例如
export default defineNuxtConfig({
imports: {
presets: [
{
from: 'vue-i18n',
imports: ['useI18n']
}
]
}
})
