# Vue: initializeGTSPA
URL: https://generaltranslation.com/es/docs/vue/reference/functions/initialize-gt-spa.mdx
Docs index: https://generaltranslation.com/llms.txt
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' },
];
```

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.