# shared

> Каталог shared/ — общий код для Vue-приложения и сервера Nitro.

Каталог `shared/` предназначен для кода, который используется и во Vue-приложении, и на сервере Nitro.

<note>

Каталог `shared/` доступен в Nuxt v3.14+.

</note>

<important>

Код в `shared/` не должен импортировать модули Vue или Nitro.

</important>

<warning>

Автоимпорты по умолчанию в Nuxt v3 отключены, чтобы не ломать существующие проекты.

Чтобы включить автоимпорт этих утилит и типов, сначала [установите `future.compatibilityVersion: 4` в `nuxt.config.ts`](/docs/3.x/getting-started/upgrade#opting-in-to-nuxt-4).

</warning>

<video-accordion title="Видео Vue School: общие утилиты и типы между приложением и сервером" video-id="nnAR-MO3q5M">



</video-accordion>

## Использование

**Способ 1:** именованный экспорт

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

**Способ 2:** экспорт по умолчанию

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

С включённым автоимпортом [утилиты из `shared/`](/docs/3.x/directory-structure/shared/#auto-imports) доступны и в приложении Nuxt, и в каталоге `server/`.

```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/`](/docs/3.x/directory-structure/composables/) и [`utils/`](/docs/3.x/directory-structure/utils/).

</tip>

<read-more to="/docs/3.x/directory-structure/composables/#how-files-are-scanned">



</read-more>

```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'
```

Алиас `#shared` даёт единообразные импорты по всему приложению независимо от того, из какого места кода они делаются.

<read-more to="/docs/3.x/guide/concepts/auto-imports">



</read-more>