# vue: Gestión de configuraciones regionales
URL: https://generaltranslation.com/es/docs/vue/guides/managing-locales.mdx
---

title: Gestión de configuraciones regionales
description: Cómo declarar configuraciones regionales en Vue, crear un selector de idioma y controlar cambios reactivos o mediante recarga.
related:
  links:
    - /docs/vue/guides/configuring
    - /docs/vue/guides/storing-translations
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/translating-content

---

Los códigos de configuración regional, como `en-US` y `fr`, vinculan la elección de idioma del usuario con el catálogo y las reglas de formato correspondientes. Configure las configuraciones regionales de origen y destino y, a continuación, use los composables de configuración regional en sus componentes de Vue.

## Declara las configuraciones regionales disponibles [#declare]

Configura la configuración regional de origen y las configuraciones regionales de destino en `gt.config.json`:

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr", "de"]
}
```

`defaultLocale` es el idioma del contenido de origen. `locales` enumera los idiomas que debe generar la CLI.

Pasa `defaultLocale` a [`createGT()`](/docs/vue/reference/functions/create-gt). Conserva la lista de idiomas de destino para el selector de idioma:

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

const availableLocales = [gtConfig.defaultLocale, ...gtConfig.locales];
```

Un plugin creado con [`createGT()`](/docs/vue/reference/functions/create-gt) no limita los códigos de configuración regional a esta lista. Ofrece únicamente valores admitidos en tu interfaz y haz que el cargador devuelva un catálogo vacío o rechace deliberadamente las solicitudes no admitidas.

## Leer la configuración regional activa [#read]

[`useLocale()`](/docs/vue/reference/composables/use-locale) devuelve una ref de Vue de solo lectura. Las plantillas la desempaquetan automáticamente:

```vue
<script setup lang="ts">
import { watch } from 'vue';
import { useLocale } from 'gt-vue';

const locale = useLocale();

watch(locale, (nextLocale) => {
  document.documentElement.lang = nextLocale;
});
</script>

<template>
  <p>Active locale: {{ locale }}</p>
</template>
```

Lee `locale.value` en expresiones de script normales. Los componentes, los valores calculados y los efectos de renderizado que leen la referencia se actualizan cuando finaliza un cambio reactivo de configuración regional.

## Crea un selector de idioma [#switcher]

[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) devuelve un setter asíncrono. Usa `await` para que la interfaz pueda mostrar una carga pendiente o gestionar un error:

```vue title="src/components/LocaleSwitcher.vue"
<script setup lang="ts">
import { ref } from 'vue';
import { useLocale, useSetLocale } from 'gt-vue';

const props = defineProps<{ locales: readonly string[] }>();
const locale = useLocale();
const setLocale = useSetLocale();
const changing = ref(false);

async function changeLocale(event: Event) {
  const target = event.target as HTMLSelectElement;
  changing.value = true;

  try {
    await setLocale(target.value);
  } finally {
    changing.value = false;
  }
}
</script>

<template>
  <select :value="locale" :disabled="changing" @change="changeLocale">
    <option v-for="code in props.locales" :key="code" :value="code">
      {{ code }}
    </option>
  </select>
</template>
```

Con un plugin [`createGT()`](/docs/vue/reference/functions/create-gt), el setter carga un catálogo que no está en caché antes de cambiar la configuración regional. Los resultados satisfactorios se almacenan en caché. Si las solicitudes se superponen, solo la solicitud más reciente cambia la configuración regional activa.

Un catálogo vacío cuenta como una carga satisfactoria: la configuración regional cambia y el contenido de origen se renderiza como contenido alternativo. Si el loader falla, la configuración regional activa y su cookie no cambian.

## Conserva la configuración regional [#persistence]

En el navegador, la configuración regional activa se almacena en una cookie de sesión válida para toda la ruta llamada `generaltranslation.locale`. Cuando se omite `locale` en [`createGT()`](/docs/vue/reference/functions/create-gt), esa cookie tiene prioridad sobre `defaultLocale`.

Establece `localeCookieName` cuando la aplicación deba compartir otra cookie con un enrutador o el servidor:

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

Usa [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) en lugar de escribir directamente en la cookie. Los navegadores no emiten un evento reactivo cuando cambian las cookies, por lo que una escritura externa no desencadena por sí sola un renderizado de Vue.

## Elige entre el cambio reactivo y el basado en recarga [#runtime-mode]

El modo de inicialización determina qué ocurre después de que cambia la cookie:

* [`createGT()`](/docs/vue/reference/functions/create-gt) carga el catálogo y actualiza los consumidores reactivos sin recargar la página.
* [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) escribe la cookie y recarga el documento para que las llamadas a [`t()`](/docs/vue/reference/functions/t) en el nivel de módulo se ejecuten de nuevo tras precargar la nueva configuración regional.

El inicializador de SPA acepta `locales` y usa `defaultLocale` como alternativa cuando una configuración regional guardada o solicitada no es compatible. Consulta [Desarrollo con traducción para SPA](/docs/vue/guides/developing-spa-translations) cuando la traducción en el nivel de módulo requiera este comportamiento.

Para el renderizado del lado del servidor, resuelve la configuración regional de la solicitud en el servidor y pásala explícitamente a [`createGT()`](/docs/vue/reference/functions/create-gt). El valor explícito reemplaza una cookie obsoleta del navegador y mantiene alineadas la configuración regional del renderizado en el servidor y la de la hidratación.
## Next steps

- /docs/vue/guides/configuring
- /docs/vue/guides/storing-translations
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/translating-content