shared
使用 shared/ 目录在 Vue 应用和 Nitro 服务器之间共享功能。
shared/ 目录允许您共享可以在 Vue 应用和 Nitro 服务器中使用的代码。
shared/ 目录在 Nuxt v3.14+ 中可用。
shared/ 目录中的代码不能导入任何 Vue 或 Nitro 代码。
为了防止对现有项目造成破坏性更改，Nuxt v3 默认未启用自动导入。
要使用这些自动导入的工具和类型，您必须首先在 nuxt.config.ts 中 设置 future.compatibilityVersion: 4。
用法
方法 1： 命名导出
shared/utils/capitalize.ts
export const capitalize = (input: string) => {
return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
方法 2： 默认导出
shared/utils/capitalize.ts
export default function (input: string) {
return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
您现在可以在 Nuxt 应用和 server/ 目录中使用自动导入的工具。
app.vue
<script setup lang="ts">
const hello = capitalize('hello')
</script>
<template>
<div>
{{ hello }}
</div>
</template>
server/api/hello.get.ts
export default defineEventHandler((event) => {
return {
hello: capitalize('hello')
}
})
文件扫描方式
只有 shared/utils/ 和 shared/types/ 目录中的文件会被自动导入。除非您将这些目录添加到 imports.dirs 和 nitro.imports.dirs，否则嵌套在这些目录子目录中的文件不会被自动导入。
shared/utils 和 shared/types 的自动导入工作方式和扫描方式与 composables/ 和 utils/ 目录相同。
目录结构
-| shared/
---| capitalize.ts # 未自动导入
---| formatters
-----| lower.ts # 未自动导入
---| utils/
-----| lower.ts # 自动导入
-----| formatters
-------| upper.ts # 未自动导入
---| types/
-----| bar.d.ts # 自动导入
您在 shared/ 文件夹中创建的任何其他文件必须使用 #shared 别名手动导入（由 Nuxt 自动配置）：
// 对于直接在 shared 目录中的文件
import capitalize from '#shared/capitalize'
// 对于嵌套目录中的文件
import lower from '#shared/formatters/lower'
// 对于 utils 中文件夹内嵌套的文件
import upper from '#shared/utils/formatters/upper'
此别名确保在应用程序中无论导入文件的位置如何，导入都保持一致。
另请参阅 guide > concepts > auto-imports