El directorio shared/ te permite compartir código que puede ser utilizado tanto en la aplicación Vue como en el servidor Nitro.

Uso

Método 1: Exportación nombrada

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

Método 2: Exportación por defecto

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

Ahora puedes usar utilidades auto-importadas en tu aplicación Nuxt y en el directorio server/.

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

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

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

Cómo se escanean los archivos

Solo los archivos en los directorios shared/utils/ y shared/types/ serán auto-importados. Los archivos anidados dentro de subdirectorios de estos directorios no serán auto-importados a menos que agregues estos directorios a imports.dirs y nitro.imports.dirs.

-| shared/
---| capitalize.ts        # No auto-importado
---| formatters
-----| lower.ts           # No auto-importado
---| utils/
-----| lower.ts           # Auto-importado
-----| formatters
-------| upper.ts         # No auto-importado
---| types/
-----| bar.d.ts           # Auto-importado

Cualquier otro archivo que crees en la carpeta shared/ debe ser importado manualmente usando el alias #shared (configurado automáticamente por Nuxt):

// Para archivos directamente en el directorio shared
import capitalize from '#shared/capitalize'

// Para archivos en directorios anidados
import lower from '#shared/formatters/lower'

// Para archivos anidados en una carpeta dentro de utils
import upper from '#shared/utils/formatters/upper'

Este alias asegura importaciones consistentes en toda tu aplicación, independientemente de la ubicación del archivo que importa.