# vue: createGT
URL: https://generaltranslation.com/es/docs/vue/reference/functions/create-gt.mdx
---

title: createGT
description: Crea un plugin de traducción aislado para Vue con estado reactivo de la configuración regional y una caché de catálogos. Referencia de la API de createGT.

---

Cada llamada crea un estado de configuración regional independiente, cargas en curso y catálogos almacenados en caché. Úsalo en aplicaciones cliente convencionales y crea una instancia por solicitud para el renderizado del lado del servidor.

## Resumen [#overview]

```ts
function createGT(options?: CreateGTOptions): GTPlugin;
```

[`createGT()`](#overview) se devuelve de inmediato. Instala el plugin con `app.use()` o precarga una configuración regional mediante el [`GTPlugin`](/docs/vue/reference/types/gt-plugin) devuelto antes de renderizar.

```ts
import { createApp } from 'vue';
import { createGT } from 'gt-vue';
import App from './App.vue';

const gt = createGT({
  defaultLocale: 'en',
  loadTranslations: async (locale) =>
    (await import(`./_gt/${locale}.json`)).default,
});

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

## Parámetros [#parameters]

| Parámetro | Descripción                                                                               | Tipo                                                             | Opcional | Predeterminado |
| --------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | -------- | -------------- |
| `options` | Configuración inicial de la configuración regional, la cookie y el cargador de catálogos. | [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options) | Sí       | `{}`           |

El objeto `options` acepta los siguientes campos:

| Opción             | Descripción                                                                              | Tipo                                                              | Opcional | Predeterminado                     |
| ------------------ | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | -------- | ---------------------------------- |
| `defaultLocale`    | Configuración regional de origen y de respaldo.                                          | `string`                                                          | Sí       | `en`                               |
| `loadTranslations` | Cargador asíncrono del catálogo de destino.                                              | [`LoadTranslations`](/docs/vue/reference/types/load-translations) | Sí       | Catálogo vacío                     |
| `locale`           | Configuración regional inicial explícita. Tiene prioridad sobre la cookie del navegador. | `string`                                                          | Sí       | Cookie y, después, `defaultLocale` |
| `localeCookieName` | Cookie del navegador utilizada para conservar la configuración regional.                 | `string`                                                          | Sí       | `generaltranslation.locale`        |

La configuración regional predeterminada siempre muestra el contenido de origen, por lo que nunca se llama a su cargador. A diferencia de [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa), [`createGT()`](#overview) no acepta una lista de permitidos de `locales` ni `customMapping`; quien realiza la llamada y el cargador determinan qué códigos de configuración regional se pueden usar.

## Valor devuelto [#returns]

**Tipo** [`GTPlugin`](/docs/vue/reference/types/gt-plugin)

El plugin devuelto proporciona `install()`, `getLocale()`, `loadTranslations()` y `setLocale()`. Instala la misma instancia cuyos métodos imperativos utilices.

Este plugin no está conectado al estado global del navegador que utiliza [`t()`](/docs/vue/reference/functions/t). Las aplicaciones cliente que necesiten traducciones a nivel de módulo deben instalar, en su lugar, el plugin exacto devuelto por [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa).

## Cómo funciona [#how-it-works]

* **Configuración regional inicial:** una `locale` explícita tiene prioridad sobre la cookie del navegador, que a su vez tiene prioridad sobre `defaultLocale`. En el servidor no hay cookie del navegador. En el navegador, una configuración regional explícita también se guarda en la cookie para mantener la coherencia durante la hidratación.
* **Carga inicial:** `app.use(gt)` comienza a cargar la configuración regional de destino activa sin bloquear el montaje. Se muestra el contenido de origen hasta que llega el catálogo; después, los consumidores que realizaron búsquedas se vuelven a renderizar.
* **Almacenamiento en caché:** los catálogos cargados correctamente se almacenan en caché durante la vida útil del plugin. Las solicitudes simultáneas para la misma configuración regional comparten una misma promesa. La configuración regional predeterminada está representada por el texto de origen y ya está almacenada en caché como un catálogo vacío.
* **Cambios de configuración regional:** `setLocale(locale)` carga un catálogo que no está en caché antes de actualizar la cookie y los consumidores reactivos. Cuando se solapan solicitudes de configuración regional, solo la más reciente cambia la configuración regional activa; los catálogos anteriores que se cargaron correctamente permanecen en caché.
* **Cambios externos de cookies:** `getLocale()` lee la cookie actual del navegador. Los navegadores no emiten un evento reactivo al cambiar una cookie, por lo que modificar `document.cookie` directamente no programa un renderizado; llame al setter del plugin o a [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale).

Si un cargador se rechaza, el plugin registra un diagnóstico de `gt-vue`, vuelve a lanzar el error y no almacena el fallo en caché. Un `setLocale()` rechazado mantiene la configuración regional y la cookie anteriores. La carga en segundo plano iniciada por `install()` registra el fallo, pero captura el rechazo para que la aplicación pueda seguir renderizando el contenido de origen.

## Renderizado del servidor [#server-rendering]

Crea un plugin nuevo para cada solicitud y pasa explícitamente la configuración regional de la solicitud. Espera a que se complete `loadTranslations(locale)` o `setLocale(locale)` 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;
}
```

No comparta este plugin entre solicitudes. La caché de configuración regional y de catálogo pertenece a una única instancia de la aplicación. Antes de la hidratación, cree y precargue un plugin de cliente con la misma configuración regional explícita; la hidratación con un catálogo no cargado puede renderizar el contenido de origen y provocar una discrepancia.

## Ejemplo [#example]

Usa los métodos devueltos por el plugin fuera de un componente cuando la aplicación anfitriona controle los cambios de configuración regional:

```ts
const gt = createGT({ defaultLocale: 'en', loadTranslations });

await gt.loadTranslations('fr'); // precarga sin cambiar la configuración regional
await gt.setLocale('fr'); // usa el catálogo en caché y vuelve a renderizar los consumidores

console.log(gt.getLocale()); // "fr"
```