# vue: Configuración de gt-vue
URL: https://generaltranslation.com/es/docs/vue/guides/configuring.mdx
---

title: Configuración de gt-vue
description: Cómo crear un plugin de traducción para Vue, cargar catálogos y configurar el renderizado en el navegador o el servidor.
related:
  links:
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/storing-translations

---

Crea un plugin para cada aplicación de Vue independiente. El plugin mantiene su configuración regional activa, los catálogos cargados y el estado de traducción reactivo.

Usa [`createGT()`](/docs/vue/reference/functions/create-gt) para aplicaciones de Vue convencionales, incluidas las que cambian de configuración regional sin recargar y las que se renderizan en el servidor. Las SPA que se ejecutan solo en el navegador y necesitan [`t()`](/docs/vue/reference/functions/t) a nivel de módulo usan una ruta de inicio distinta, descrita en [Desarrollo con traducciones para SPA](/docs/vue/guides/developing-spa-translations).

## Crea el plugin [#create]

Pasa la configuración regional de origen y una función de callback [`loadTranslations`](/docs/vue/reference/types/load-translations) a [`createGT()`](/docs/vue/reference/functions/create-gt) y, a continuación, instala el plugin resultante con `app.use()`:

```ts title="src/main.ts"
import { createApp } from 'vue';
import { createGT } from 'gt-vue';
import App from './App.vue';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

const gt = createGT({
  defaultLocale: gtConfig.defaultLocale,
  loadTranslations,
});

createApp(App).use(gt).mount('#app');
```

Instala ese plugin una sola vez. Crear otra instancia le asigna una configuración regional y una caché de catálogo independientes.

## Resolver la configuración regional inicial [#initial-locale]

[`createGT()`](/docs/vue/reference/functions/create-gt) resuelve la configuración regional inicial en este orden:

1. Una opción `locale` explícita.
2. El valor en el navegador de la cookie de configuración regional configurada.
3. `defaultLocale`.

Una configuración regional explícita prevalece durante el renderizado en el servidor y la hidratación. En el navegador, reemplaza una cookie desactualizada para que el cliente se inicie con la misma configuración regional que el servidor.

```ts
const gt = createGT({
  defaultLocale: 'en',
  locale: serverLocale,
  localeCookieName: 'my-app.locale',
  loadTranslations,
});
```

El nombre de la cookie predeterminado es `generaltranslation.locale`. Cambia `localeCookieName` solo si el enrutador o el servidor necesitan compartir una cookie diferente.

## Cargar catálogos de traducciones [#load]

La configuración regional predeterminada se procesa directamente a partir del contenido de origen, por lo que nunca se llama a su cargador. Las demás configuraciones regionales se cargan mediante [`loadTranslations`](/docs/vue/reference/types/load-translations):

```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;
```

Los catálogos cargados correctamente se almacenan en caché durante la vida útil del plugin, y las solicitudes simultáneas para la misma configuración regional comparten una única carga. En el cliente, la aplicación puede montarse con el contenido fuente mientras se carga el primer catálogo; los componentes traducidos se vuelven a renderizar cuando este llega.

Devolver un objeto vacío usa el contenido fuente como contenido alternativo. Si el callback devuelve una promesa rechazada, los cambios de configuración regional se rechazan y la configuración regional actual permanece activa.

## Mantén alineadas las configuraciones de la CLI y del entorno de ejecución [#shared-config]

Usa `gt.config.json` como registro compartido de la configuración regional de origen, las configuraciones regionales de destino y la ubicación de los archivos generados:

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

La CLI lee este archivo directamente. [`createGT()`](/docs/vue/reference/functions/create-gt) acepta sus propias opciones de ejecución, así que pásale explícitamente `defaultLocale` y tu cargador. La lista `locales` sigue siendo útil para el selector de idioma y la CLI, pero un plugin reactivo no rechaza otros códigos de configuración regional; la interfaz de usuario y el cargador determinan qué configuraciones regionales están disponibles.

Las credenciales de la API de producción pertenecen al proceso de la CLI que genera las traducciones. No expongas `GT_API_KEY` en código que se ejecute en el navegador.

## Configura el renderizado en el servidor [#ssr]

Crea un plugin nuevo para cada solicitud para evitar que el estado de la configuración regional y del catálogo se filtre entre usuarios. Resuelve la configuración regional de la solicitud, pásala explícitamente y precarga su catálogo antes de renderizar:

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

export async function createRequestGT(locale: string) {
  const gt = createGT({
    defaultLocale: 'en',
    locale,
    loadTranslations,
  });

  await gt.loadTranslations(locale);
  return gt;
}
```

Instala el plugin devuelto en la aplicación Vue de la solicitud. Antes de hidratar en el navegador, crea y precarga un plugin de cliente con la misma configuración regional explícita. Si se hidrata antes de que el catálogo de destino esté listo, el contenido de origen შეიძლება mostrarse brevemente y provocar una discrepancia.
## Next steps

- /docs/vue/guides/translating-content
- /docs/vue/guides/translating-strings
- /docs/vue/guides/managing-locales
- /docs/vue/guides/storing-translations