# vue: Desarrollo con traducciones para SPA
URL: https://generaltranslation.com/es/docs/vue/guides/developing-spa-translations.mdx
---

title: Desarrollo con traducciones para SPA
description: Cómo precargar una SPA de Vue y traducir cadenas estáticas en el nivel de módulo con t().
related:
  links:
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/storing-translations
    - /docs/vue/guides/configuring

---

Las aplicaciones de una sola página que se ejecutan únicamente en el navegador pueden precargar el catálogo activo antes de que se ejecuten los módulos de la aplicación. Esto permite realizar llamadas síncronas a [`t()`](/docs/vue/reference/functions/t) en el nivel de módulo para constantes, definiciones de navegación y otras cadenas fuera de los componentes de Vue.

[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) complementa a [`useGT()`](/docs/vue/reference/composables/use-gt); no lo sustituye. Usa el composable para el contenido habitual de los componentes y para aplicaciones de Vue o renderizadas en el servidor que requieran un cambio reactivo de configuración regional.

## Elige el runtime de la SPA [#choose]

Usa [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) solo si se cumplen todas estas condiciones:

* La aplicación se ejecuta por completo en el navegador.
* Los módulos deben traducir cadenas mientras se evalúan.
* Es aceptable recargar la página cuando cambia la configuración regional.

Usa [`createGT()`](/docs/vue/reference/functions/create-gt) cuando la aplicación se renderiza en el servidor o debe cambiar la configuración regional de forma reactiva sin recargar la página.

## Bootstrap antes de importar la aplicación [#bootstrap]

El límite de inicialización debe ejecutarse antes que cualquier módulo que invoque [`t()`](/docs/vue/reference/functions/t). Un pequeño bootstrap asíncrono funciona con el destino de compilación predeterminado de Vite 6 y no requiere `await` de nivel superior ni `build.target: 'esnext'`.

### 1. Exporta una función de montaje

Modifica el módulo de entrada habitual de Vite para que exporte una función que acepte el [`GTPlugin`](/docs/vue/reference/types/gt-plugin) inicializado:

```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');
}
```

### 2. Inicializa e importa dinámicamente

Crea un módulo de bootstrap que espere a [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa), luego importe la aplicación e instale el plugin exacto devuelto por la inicialización:

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

bootstrap().catch((error) => {
  console.error('Failed to initialize translations', error);
});
```

La primera llamada se hace cargo del runtime de la SPA de toda la página. Las llamadas simultáneas comparten su inicialización y las posteriores devuelven el mismo plugin. No llames a [`createGT()`](/docs/vue/reference/functions/create-gt) para la aplicación montada, ya que las búsquedas de componentes y de nivel de módulo usarán estados distintos.

### 3. Haz que Vite apunte al bootstrap

Actualiza el script de módulo de `index.html` para cargar `src/index.ts` en lugar de `src/main.ts`:

```html title="index.html"
<script type="module" src="/src/index.ts"></script>
```

## Traduce cadenas a nivel de módulo [#translate]

Los módulos cargados mediante la importación dinámica de la aplicación pueden invocar [`t()`](/docs/vue/reference/functions/t) de forma síncrona:

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

export const message = t('Hello World');

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

Las llamadas deben usar una cadena de origen estática y pueden incluir un `$context` estático. El extractor registra esas cadenas, y el catálogo precargado hace que la búsqueda sea síncrona al ejecutarse el módulo.

[`t()`](/docs/vue/reference/functions/t) no admite plantillas etiquetadas, sintaxis ICU, interpolación, `$format` ni `$maxChars`. Usa [`<T>`](/docs/vue/reference/components/t) con [`<Var>`](/docs/vue/reference/components/var) para contenido que incluya valores en tiempo de ejecución.

## Cambiar configuraciones regionales en una SPA inicializada [#locales]

Pasa `defaultLocale` y `locales` de `gt.config.json` a [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa). Si una configuración regional guardada no es compatible, se usa la configuración regional predeterminada en la siguiente inicialización.

Cuando [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) cambia la configuración regional, el runtime de la SPA guarda la cookie de configuración regional y recarga el documento. Mantiene intencionadamente la página actual en la configuración regional con la que se inicializó hasta esa recarga. A continuación, el bootstrap precarga el nuevo catálogo antes de que vuelvan a ejecutarse las llamadas de nivel de módulo.

Este contrato de recarga hace que las constantes de nivel de módulo sean seguras. Si necesitas cambiar la configuración regional sin navegar, usa [`createGT()`](/docs/vue/reference/functions/create-gt) y llama a [`useGT()`](/docs/vue/reference/composables/use-gt) desde una plantilla o un valor calculado.
## Next steps

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