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 (input: string) {
  return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}

您现在可以在 Nuxt 应用和 server/ 目录中使用自动导入的工具。

app/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 自动导入的工作方式和扫描方式与 app/composables/ 和 app/utils/ 目录相同。
阅读更多，请参阅 文档 > 4 X > 指南 > 目录结构 > 应用 > Composables#文件如何被扫描。
目录结构
-| 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.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'

无论导入文件的位置如何，此别名都能确保您的应用程序中的导入一致。

在文档 > 4 X > 指南 > 概念 > 自动导入中了解更多信息。