shared

shared/ 目录允许你共享可同时用于 Vue 应用和 Nitro 服务器的代码。

为什么你不能混用 Vue 和 Nitro 代码

Nuxt 构建两个独立的包：Vue 应用（客户端和服务端渲染）以及 Nitro 服务器（API 路由、服务端中间件、服务端插件）。它们是独立打包并在不同上下文中运行的。shared/ 目录中的代码会被这两个包同时使用，因此不能从其中任一方进行导入。

Nitro 中的 Vue 应用代码

组件和组合式函数需要 Vue 应用运行时，并且通常还需要 Nuxt 上下文（例如 useNuxtApp() 或 useRoute()），而这些在 Nitro 中都不存在。将它们导入到服务端代码中可能会导致构建或运行时错误，并且可能把 Vue 应用的依赖带入你的服务器包中。

Vue 应用中的 Nitro 代码

仅限服务端的代码（例如 Node API、Nitro 工具函数或服务端路由处理器）绝不能在浏览器中运行。将它导入到你的应用中可能会破坏客户端构建、在浏览器中引发运行时错误，或将服务端逻辑泄漏到客户端包中。

仅类型导入

import type 会在编译时被擦除，不会把运行时代码拉入另一个包中，因此跨边界只导入类型看起来似乎可行。即便如此，还是应该将共享类型（例如 API 响应类型）放在 shared/types/ 中，这样它们会在两个上下文中自动导入。这样可以保持边界清晰，避免日后不小心把类型导入变成值导入，并且也符合 Nuxt 为应用、服务端和共享代码分别设置的独立 类型上下文。

仅在一个上下文中使用的类型可以直接放在对应上下文旁边：app/types/ 只会在 Vue 应用中自动导入，而 server/types/ 只会在 Nitro 服务器中自动导入。当一个类型需要在两边都使用时，请使用 shared/types/。

用法

方法 1： 命名导出

export const capitalize = (input: string) => {
  return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}

方法 2： 默认导出

export default function (input: string) {
  return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}

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

<script setup lang="ts">
const hello = capitalize('hello')
</script>

<template>
  <div>
    {{ hello }}
  </div>
</template>

export default defineEventHandler((event) => {
  return {
    hello: capitalize('hello'),
  }
})

文件是如何被扫描的

只有位于 shared/utils/ 和 shared/types/ 目录下的文件会被自动导入。位于这些目录子目录中的文件不会被自动导入，除非你将这些子目录添加到 imports.dirs 和 nitro.imports.dirs。

-| shared/
---| capitalize.ts        # 不会自动导入
---| formatters
-----| lower.ts           # 不会自动导入
---| utils/
-----| lower.ts           # 自动导入
-----| formatters
-------| upper.ts         # 不会自动导入
---| types/
-----| bar.ts             # 自动导入

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

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

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

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

此别名确保无论导入文件位置在哪里，导入路径都保持一致。