shared

Директория shared/ предназначена для общего кода между Vue-приложением и сервером Nitro.

Директория shared/ позволяет использовать один и тот же код и во Vue-приложении, и на сервере Nitro.

Директория shared/ доступна в Nuxt v3.14+.
Код в shared/ не может импортировать код Vue или Nitro.

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

Способ 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/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 такой же, как для app/composables/ и app/utils/.
Узнать больше Docs > 4 X > Directory Structure > App > Composables#how Files Are Scanned.
Directory Structure
-| 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'

Так импорты остаются единообразными в любом месте приложения.

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