---
title: "shared"
description: "使用 shared/ 目录在 Vue 应用和 Nitro 服务器之间共享功能。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/directory-structure/shared"
---
# shared

> 使用 shared/ 目录在 Vue 应用和 Nitro 服务器之间共享功能。

`shared/` 目录允许你共享可以在 Vue 应用和 Nitro 服务器中共用的代码。

::note
`shared/` 目录在 Nuxt v3.14+ 版本中可用。
::

::important
`shared/` 目录中的代码不能导入任何 Vue 或 Nitro 的代码。
::

::warning
为了防止破坏现有项目，Nuxt v3 默认未启用自动导入。

要使用这些自动导入的工具函数和类型，你必须先[在 `nuxt.config.ts` 中设置 `future.compatibilityVersion: 4`](https://nuxt.zhcndoc.com/docs/3.x/getting-started/upgrade#opting-in-to-nuxt-4)。
::

::video-accordion{title="观看 Vue School 关于在应用和服务器间共享工具函数和类型的视频" videoId="nnAR-MO3q5M"}
::

## 使用方法

**方法 1：** 命名导出

```ts twoslash [shared/utils/capitalize.ts]
export const capitalize = (input: string) => {
  return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
```

**方法 2：** 默认导出

```ts twoslash [shared/utils/capitalize.ts]
export default function (input: string) {
  return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
```

现在，你可以在 Nuxt 应用和 `server/` 目录中使用[自动导入](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/shared)的工具函数。

```vue [app.vue]
<script setup lang="ts">
const hello = capitalize('hello')
</script>

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

```ts [server/api/hello.get.ts]
export default defineEventHandler((event) => {
  return {
    hello: capitalize('hello'),
  }
})
```

## 文件扫描方式

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

::tip
`shared/utils` 和 `shared/types` 的自动导入和扫描方式与 [`composables/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/composables) 和 [`utils/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/utils) 目录完全相同。
::

::read-more{to="https://nuxt.zhcndoc.com/docs/3.x/directory-structure/composables#how-files-are-scanned"}
::

```bash [目录结构]
-| shared/
---| capitalize.ts        # 不自动导入
---| formatters
-----| lower.ts           # 不自动导入
---| utils/
-----| lower.ts           # 自动导入
-----| formatters
-------| upper.ts         # 不自动导入
---| types/
-----| bar.d.ts           # 自动导入
```

你在 `shared/` 目录创建的其他文件必须用 `#shared` 别名手动导入（Nuxt 会自动配置该别名）：

```ts
// 直接位于 shared 目录下的文件
import capitalize from '#shared/capitalize'

// 嵌套目录下的文件
import lower from '#shared/formatters/lower'

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

该别名保证无论导入文件处于何处，导入路径都保持一致。

::read-more{to="https://nuxt.zhcndoc.com/docs/3.x/guide/concepts/auto-imports"}
::


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.