# vue: Almacenamiento local de traducciones
URL: https://generaltranslation.com/es/docs/vue/guides/storing-translations.mdx
---

title: Almacenamiento local de traducciones
description: Cómo generar, empaquetar y cargar catálogos de traducciones de gt-vue con tu aplicación.
related:
  links:
    - /docs/vue/guides/configuring
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/translating-content

---

`gt-vue` recibe catálogos para las configuraciones regionales de destino mediante una devolución de llamada de [`loadTranslations`](/docs/vue/reference/types/load-translations). Genera esos catálogos en tu árbol de código fuente para empaquetarlos con la aplicación y evitar depender de un servicio de traducción en tiempo de ejecución.

Los catálogos empaquetados hacen que las actualizaciones de las traducciones formen parte del despliegue. Vuelve a generar y desplegar la aplicación cada vez que cambie el contenido de origen o alguna traducción.

## Configura la ruta de salida [#configure]

Configura la salida de `gt` en `gt.config.json` con una ruta dentro de tu directorio de código fuente. El marcador de posición `[locale]` crea un archivo por cada configuración regional de destino:

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

La configuración regional predeterminada no necesita un archivo de catálogo porque el contenido de origen ya está presente en la aplicación.

## Genera los catálogos [#generate]

Ejecuta la CLI después de añadir o modificar contenido traducible:

```bash
npx gt translate
```

El comando extrae los usos admitidos de [`<T>`](/docs/vue/reference/components/t), [`useGT()`](/docs/vue/reference/composables/use-gt), [`msg()`](/docs/vue/reference/functions/msg) y [`t()`](/docs/vue/reference/functions/t), y luego escribe los archivos de la configuración regional de destino. Considera estos archivos como salida generada y no los edites manualmente.

Agrega la generación de traducciones antes de la compilación de producción si cada despliegue debe incluir catálogos actualizados:

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && vue-tsc -b && vite build"
  }
}
```

La CLI necesita `GT_PROJECT_ID` y `GT_API_KEY` en el entorno de compilación. No incluyas la clave de producción en el bundle del navegador.

## Carga catálogos con Vite [#vite]

Crea un callback de [`loadTranslations`](/docs/vue/reference/types/load-translations) cuya ruta de importación coincida con la salida configurada:

```ts title="src/loadTranslations.ts"
import type { LoadTranslations } from 'gt-vue';

const loadTranslations: LoadTranslations = async (locale) => {
  try {
    return (await import(`./_gt/${locale}.json`)).default;
  } catch {
    return {};
  }
};

export default loadTranslations;
```

Pásalo a [`createGT()`](/docs/vue/reference/functions/create-gt) para la carga reactiva o a [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) para una SPA precargada que solo se ejecuta en el navegador.

El callback anterior trata un archivo inexistente como un catálogo vacío, por lo que se muestra el contenido de origen para esa configuración regional. En su lugar, deja que se produzca el rechazo del error cuando la ausencia de un catálogo de producción deba bloquear el cambio de configuración regional o el arranque de la aplicación.

## Usa importaciones explícitas cuando sea necesario [#explicit-imports]

Algunos empaquetadores no pueden detectar todos los archivos a los que se hace referencia mediante una importación variable. Define un mapa estático de cargadores para que cada destino sea visible en tiempo de compilación:

```ts title="src/loadTranslations.ts"
import type { LoadTranslations } from 'gt-vue';

const loaders = {
  es: () => import('./_gt/es.json'),
  fr: () => import('./_gt/fr.json'),
};

const loadTranslations: LoadTranslations = async (locale) => {
  const load = loaders[locale as keyof typeof loaders];
  return load ? (await load()).default : {};
};

export default loadTranslations;
```

Mantén este mapa sincronizado con `locales` en `gt.config.json`. Devolver `{}` es apropiado para una configuración regional que no se admite intencionalmente; rechazar la promesa hace visible el fallo para quien la invoca.

## Cargar desde otra fuente [#custom-source]

El callback puede obtener un catálogo desde tu propio endpoint en lugar de importar un archivo incluido en el bundle:

```ts
const loadTranslations: LoadTranslations = async (locale) => {
  const response = await fetch(`/translations/${locale}.json`);
  if (!response.ok) throw new Error(`Catalog unavailable for ${locale}`);
  return response.json();
};
```

[`createGT()`](/docs/vue/reference/functions/create-gt) almacena en caché cada catálogo cargado correctamente durante la vida útil de su instancia de plugin y evita duplicar las cargas simultáneas. Valide las respuestas en el límite de su endpoint; el entorno de ejecución espera un [`TranslationCatalog`](/docs/vue/reference/types/translation-catalog) completo indexado por hash para la configuración regional solicitada.
## Next steps

- /docs/vue/guides/configuring
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/managing-locales
- /docs/vue/guides/translating-content