v3.16
Nuxt on GitHub

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/ 目录完全相同。
阅读更多 Docs > Guide > Directory Structure > Composables#how Files Are Scanned.
Directory Structure
-| shared/
---| capitalize.ts        # 不会被自动导入
---| formatters
-----| lower.ts           # 不会被自动导入
---| utils/
-----| lower.ts           # 会被自动导入
-----| formatters
-------| upper.ts         # 不会被自动导入
---| types/
-----| bar.d.ts           # 会被自动导入

你在 shared/ 文件夹中创建的任何其他文件必须使用 Nuxt 自动配置的 #shared 别名手动导入：

// 对于 shared 目录中的文件
import capitalize from '#shared/capitalize'

// 对于嵌套目录中的文件
import lower from '#shared/formatters/lower'

// 对于 utils 中嵌套文件夹中的文件
import upper from '#shared/utils/formatters/upper'

此别名确保无论导入文件的位置如何，应用中的导入方式都保持一致。

阅读更多 Docs > Guide > Concepts > Auto Imports.