useLocales

useLocales es el sistema de carga de contenido multi-idioma por página. A diferencia de useI18n() (que maneja strings cortos como labels de botones), useLocales carga archivos JSON completos con el contenido de cada página.

Uso básico

interface WebinarsPageData {
  title: string
  subtitle: string
  cta: string
}

const { data } = await useLocales<WebinarsPageData>('webinars')
// data es de tipo WebinarsPageData

El string 'webinars' corresponde al archivo:

app/locales/inspiria/es/webinars.json (fallback)
app/locales/inspiria/en/webinars.json (si el usuario está en inglés)

Características

Feature	Comportamiento
Fallback automático	Si un campo está vacío en el idioma actual, usa el español
Merge profundo	Funciona recursivamente en objetos y arrays anidados
Merge por ID	Arrays de objetos con `id` se mergean por ID, no por posición
Detección de vacío	`null`, `undefined`, `""`, `[]`, `{}` se consideran “sin valor”
Archivo inexistente	Si el JSON no existe para el idioma, usa el fallback completo

Diferencia con useI18n

	`useI18n()`	`useLocales()`
Archivos	`i18n/es.json` (global)	`locales/inspiria/{lang}/{page}.json`
Granularidad	String individual	Objeto completo de página
Fallback	Automático (vue-i18n)	Custom merge profundo
Uso típico	`t('button.buy')`	`data.heroSection.title`
Carga	Síncrona	Async (import dinámico)

Ubicación

app/composables/useLocales.ts