shared
使用 shared/ 目录在 Vue 应用和 Nitro 服务器之间共享功能。
shared/ 目录允许您共享可在 Vue 应用和 Nitro 服务器中使用的代码。
shared/ 目录在 Nuxt v3.14+ 版本中可用。shared/ 目录中的代码不能导入任何 Vue 或 Nitro 代码。用法
方法 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 capitalize (input: string) {
return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
用法：您现在可以在 Vue 应用和 server/ 目录中的 .js、.ts 和 .vue 文件中使用自动导入的实用程序函数。
如果您在 nuxt.config.ts 中 设置了 compatibilityVersion: 4，则可以在 app/ 目录中使用自动导入的函数。这是 Nuxt 为版本 4 准备的渐进式兼容性功能的一部分。
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/ 目录中的文件会被自动导入。这些目录的子目录中嵌套的文件不会被自动导入。
目录结构
-| shared/
---| capitalize.ts # Not auto-imported
---| formatters
-----| lower.ts # Not auto-imported
---| utils/
-----| lower.ts # Auto-imported
-----| formatters
-------| upper.ts # Not auto-imported
---| types/
-----| bar.d.ts # Auto-imported
您在 shared/ 文件夹中创建的任何其他文件都必须使用 #shared 别名（由 Nuxt 自动配置）手动导入
// For files directly in the shared directory
import capitalize from '#shared/capitalize'
// For files in nested directories
import lower from '#shared/formatters/lower'
// For files nested in a folder within utils
import upper from '#shared/utils/formatters/upper'
此别名确保您的应用程序中导入的一致性，而不管导入文件的位置如何。