O diretório shared/ permite que você compartilhe código que pode ser usado tanto no aplicativo Vue quanto no servidor Nitro.

Uso

Método 1: Exportação nomeada

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

Método 2: Exportação padrão

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

Agora você pode usar utilitários importados automaticamente no seu aplicativo Nuxt e no diretório server/.

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

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

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

Como os Arquivos São Escaneados

Apenas arquivos nos diretórios shared/utils/ e shared/types/ serão importados automaticamente. Arquivos aninhados dentro de subdiretórios desses diretórios não serão importados automaticamente, a menos que você adicione esses diretórios a imports.dirs e nitro.imports.dirs.

-| shared/
---| capitalize.ts        # Não importado automaticamente
---| formatters
-----| lower.ts           # Não importado automaticamente
---| utils/
-----| lower.ts           # Importado automaticamente
-----| formatters
-------| upper.ts         # Não importado automaticamente
---| types/
-----| bar.d.ts           # Importado automaticamente

Qualquer outro arquivo que você criar na pasta shared/ deve ser importado manualmente usando o alias #shared (configurado automaticamente pelo Nuxt):

// Para arquivos diretamente no diretório shared
import capitalize from '#shared/capitalize'

// Para arquivos em diretórios aninhados
import lower from '#shared/formatters/lower'

// Para arquivos aninhados em uma pasta dentro de utils
import upper from '#shared/utils/formatters/upper'

Este alias garante importações consistentes em toda a sua aplicação, independentemente da localização do arquivo que está importando.