# vue: initializeGTSPA
URL: https://generaltranslation.com/es/docs/vue/reference/functions/initialize-gt-spa.mdx
---

title: initializeGTSPA
description: Inicializa y precarga el entorno de ejecución de Vue SPA exclusivo del navegador para traducciones de nivel de módulo. Referencia de la API de initializeGTSPA.

---

Este inicializador gestiona un único entorno de ejecución para toda la página y pone a disposición de las llamadas síncronas a [`t()`](/docs/vue/reference/functions/t) el catálogo que carga. Complementa el callback [`useGT()`](/docs/vue/reference/composables/use-gt) dentro de los componentes; no sustituye el composable ni admite el renderizado del lado del servidor.

## Descripción general [#overview]

```ts
function initializeGTSPA(
  options?: InitializeGTSPAOptions
): Promise<GTPlugin>;
```

Espere a que finalice el inicializador antes de importar cualquier módulo que llame a [`t()`](/docs/vue/reference/functions/t) y, a continuación, instale el plugin exacto que se devuelve:

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-vue';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

async function bootstrap() {
  const gt = await initializeGTSPA({ ...gtConfig, loadTranslations });
  const { mount } = await import('./main');
  mount(gt);
}

void bootstrap().catch((error: unknown) => {
  console.error(error);
});
```

## Parámetros [#parameters]

| Parámetro | Descripción                                                                                                                            | Tipo                                                                            | Opcional | Predeterminado |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | -------- | -------------- |
| `options` | Configuración de la SPA para la configuración regional, las cookies, la asignación, la lista de permitidos y el cargador del catálogo. | [`InitializeGTSPAOptions`](/docs/vue/reference/types/initialize-gt-spa-options) | Sí       | `{}`           |

| 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 utilizada para conservar la configuración regional seleccionada.                                                                                      | `string`                                                              | Sí       | `generaltranslation.locale`        |
| `locales`          | Configuraciones regionales de destino aceptadas desde la configuración, las cookies y los métodos de establecimiento.                                        | `readonly string[]`                                                   | Sí       | Sin restricciones                  |
| `customMapping`    | Objeto que asigna valores `code` utilizados para la coincidencia de configuraciones regionales y la resolución de la configuración regional del formateador. | [`CustomMapping`](/docs/platform/core/reference/types/custom-mapping) | Sí       | Ninguno                            |

`locales` normalmente contiene las configuraciones regionales de destino de `gt.config.json`; el inicializador añade `defaultLocale` al conjunto compatible. Consulta [`InitializeGTSPAOptions`](/docs/vue/reference/types/initialize-gt-spa-options) para obtener detalles sobre la resolución.

## Inicialización [#initialization]

La primera llamada inicia la inicialización de toda la página y establece sus opciones. Las llamadas simultáneas comparten esa promesa. Una vez que se completa correctamente, todas las llamadas posteriores devuelven el mismo [`GTPlugin`](/docs/vue/reference/types/gt-plugin) e ignoran las nuevas opciones.

La inicialización realiza estos pasos antes de resolverse:

1. Resuelve la configuración regional explícita, la cookie guardada o la configuración regional predeterminada según `locales` y `customMapping`.
2. Crea un entorno de ejecución cuya configuración regional activa permanece fijada durante toda la vida útil de la página.
3. Carga y almacena en caché el catálogo de destino activo. La configuración regional predeterminada usa el contenido de origen y omite el cargador.
4. Publica el entorno de ejecución para las llamadas a [`t()`](/docs/vue/reference/functions/t) de nivel de módulo.

Si la carga falla, la inicialización registra el diagnóstico del cargador y se rechaza. El intento fallido no se convierte en el singleton, por lo que una llamada posterior puede volver a intentarlo.

## Cambios de configuración regional [#locale-changes]

El plugin devuelto utiliza una transición de recarga. Al llamar a `plugin.setLocale(locale)` o [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale), se resuelve la configuración regional solicitada, se guarda en la cookie configurada y se recarga el documento.

La página actual conserva su configuración regional fijada hasta la recarga. En el siguiente arranque se resuelve la nueva cookie y se precarga ese catálogo antes de que se ejecuten los módulos de la aplicación, por lo que se vuelven a evaluar todas las traducciones de nivel de módulo. El setter no carga el catálogo de destino en la página actual antes de recargar.

Si se proporciona `locales`, la coincidencia no distingue entre mayúsculas y minúsculas y admite alias canónicos. Se conserva la grafía de `gt.config.json` para las rutas del cargador. Las configuraciones regionales guardadas o solicitadas no compatibles se resuelven como `defaultLocale`. Cuando se omite `locales`, los códigos de configuración regional distintos del predeterminado no tienen restricciones.

## Valores devueltos y errores [#return-errors]

**Devuelve** `Promise<`[`GTPlugin`](/docs/vue/reference/types/gt-plugin)`>`

La promesa se resuelve solo cuando la configuración regional inicial está lista. Instala este plugin concreto; si creas una instancia independiente de [`createGT()`](/docs/vue/reference/functions/create-gt), los componentes tendrían una configuración regional y una caché del catálogo distintas de las de [`t()`](/docs/vue/reference/functions/t).

La promesa devuelta se rechaza en un entorno de renderizado del lado del servidor, ya que el estado global del navegador y las recargas del documento no son seguros por solicitud. Para el renderizado del lado del servidor, usa un único plugin [`createGT({ locale })`](/docs/vue/reference/functions/create-gt#server-rendering) con ámbito de solicitud y [`useGT()`](/docs/vue/reference/composables/use-gt) dentro de los componentes.

## Ejemplo [#example]

Mantén el punto de entrada habitual de Vue dentro de una función de montaje:

```ts title="src/main.ts"
import { createApp } from 'vue';
import type { GTPlugin } from 'gt-vue';
import App from './App.vue';

export function mount(gt: GTPlugin) {
  createApp(App).use(gt).mount('#app');
}
```

Cualquier módulo al que se acceda mediante la posterior importación dinámica puede traducirse durante la evaluación:

```ts title="src/navigation.ts"
import { t } from 'gt-vue';

export const navigation = [
  { label: t('Documentation'), href: '/docs' },
  { label: t('Settings'), href: '/settings' },
];
```