shared

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

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

Каталог shared/ доступен в Nuxt v3.14+.
Код в shared/ не должен импортировать модули Vue или Nitro.
Автоимпорты по умолчанию в Nuxt v3 отключены, чтобы не ломать существующие проекты.Чтобы включить автоимпорт этих утилит и типов, сначала установите future.compatibilityVersion: 4 в nuxt.config.ts.

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

Способ 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) : ''
}

С включённым автоимпортом утилиты из shared/ доступны и в приложении 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 > 3 X > Directory Structure > Composables > #how Files Are Scanned.
Структура каталога
-| shared/
---| capitalize.ts        # без автоимпорта
---| formatters
-----| lower.ts           # без автоимпорта
---| utils/
-----| lower.ts           # с автоимпортом
-----| formatters
-------| upper.ts         # без автоимпорта
---| types/
-----| bar.d.ts           # с автоимпортом

Остальные файлы в shared/, которые вы добавляете сами, импортируйте вручную через алиас #shared (Nuxt настраивает его автоматически):

// файл прямо в корне shared/
import capitalize from '#shared/capitalize'

// файл во вложенной папке
import lower from '#shared/formatters/lower'

// файл в подпапке внутри utils
import upper from '#shared/utils/formatters/upper'

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

Узнать больше Docs > 3 X > Guide > Concepts > Auto Imports.