# vue: Configuración
URL: https://generaltranslation.com/es/docs/vue/reference/config.mdx
---

title: Configuración
description: Configura la generación de catálogos y la inicialización en tiempo de ejecución para una aplicación Vue. Referencia de configuración de Vue.

---

La configuración tiene dos consumidores independientes. La CLI `gt` lee `gt.config.json` para localizar el contenido de origen y escribir catálogos, mientras que tu aplicación pasa opciones de tiempo de ejecución a [`createGT()`](/docs/vue/reference/functions/create-gt) o [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa).

`gt-vue` no localiza ni lee `gt.config.json` automáticamente. Importa explícitamente los valores compartidos y proporciona funciones como [`loadTranslations`](/docs/vue/reference/types/load-translations) en el código de la aplicación.

## Descripción general [#overview]

| Superficie                                                             | Propósito                                                                                                                  | Configuración                                                                                                             |
| ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `gt.config.json`                                                       | Extrae el contenido de origen y genera catálogos de traducción.                                                            | Campos de la CLI serializables como JSON, como `projectId`, `defaultLocale`, `locales`, `src`, `files` y `customMapping`. |
| [`createGT()`](/docs/vue/reference/functions/create-gt)                | Crea un plugin aislado para el renderizado reactivo en el cliente o el renderizado en el servidor con ámbito de solicitud. | [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options)                                                          |
| [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Crea y precarga el plugin global del navegador que usa [`t()`](/docs/vue/reference/functions/t) a nivel de módulo.         | [`InitializeGTSPAOptions`](/docs/vue/reference/types/initialize-gt-spa-options)                                           |

Los campos exclusivos de la CLI `projectId`, `src` y `files` se ignoran en tiempo de ejecución. Los campos exclusivos de tiempo de ejecución `locale`, `localeCookieName` y `loadTranslations` no se pueden representar por completo en JSON. `defaultLocale` se comparte en todas las superficies; el inicializador de SPA también acepta `locales` y `customMapping`.

## `gt.config.json` [#config-file]

Coloca `gt.config.json` en la raíz del proyecto. Esta configuración de Vue analiza patrones glob de source explícitos y genera un catálogo para cada configuración regional de destino:

```json title="gt.config.json"
{
  "$schema": "https://assets.gtx.dev/config-schema.json",
  "defaultLocale": "en",
  "locales": ["es", "fr"],
  "src": ["src/**/*.{vue,js,jsx,mjs,cjs,ts,tsx,mts,cts}"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

Las entradas de `src` son patrones glob. Un directorio sin más, como `"src"`, no coincide recursivamente con archivos; incluye los archivos y extensiones que debe analizar la CLI. Los valores predeterminados de Vue cubren los componentes de archivo único de la raíz y los directorios convencionales de Vue y Nuxt cuando se omite `src`.

| Campo                                                        | Uso en Vue                                                                            | Uso en tiempo de ejecución                                                                                                                                                                                                                                                                |
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `$schema`                                                    | Añade validación y autocompletado en el editor.                                       | Ninguno                                                                                                                                                                                                                                                                                   |
| `projectId`                                                  | Selecciona el Project de General Translation que usa la CLI.                          | Ninguno                                                                                                                                                                                                                                                                                   |
| [`defaultLocale`](/docs/cli/reference/config#default-locale) | Declara la configuración regional de origen.                                          | Pásalo a cualquiera de los inicializadores de tiempo de ejecución.                                                                                                                                                                                                                        |
| [`locales`](/docs/cli/reference/config#locales)              | Declara las configuraciones regionales de destino generadas por la CLI.               | Pásalo a [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) para rechazar configuraciones regionales guardadas o solicitadas no compatibles. Un plugin de [`createGT()`](/docs/vue/reference/functions/create-gt) no restringe los códigos de configuración regional. |
| [`src`](/docs/cli/reference/config#src)                      | Selecciona archivos fuente de Vue, JavaScript y TypeScript para extraer contenido.    | Ninguno                                                                                                                                                                                                                                                                                   |
| [`files.gt.output`](/docs/cli/reference/config#files)        | Establece la ruta del catálogo generado. Conserva el marcador de posición `[locale]`. | Haz que el loader importe desde el mismo directorio.                                                                                                                                                                                                                                      |
| [`customMapping`](/docs/cli/reference/config#custom-mapping) | Aplica alias de configuración regional al generar traducciones.                       | Pásalo a [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) para que los mapeos de objetos con un `code` válido puedan determinar la coincidencia de configuraciones regionales y la resolución de la configuración regional del formateador.                         |

Consulta la [referencia de configuración de la CLI](/docs/cli/reference/config) para conocer todos los campos de proyecto, archivo, publicación, revisión y rama. Mantén `GT_API_KEY` en el entorno de la CLI; no incluyas credenciales de producción en `gt.config.json` ni en código del navegador.

## Opciones de tiempo de ejecución [#runtime-options]

| Opción             | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Predeterminado                                 |
| ------------------ | ------------------------------------------------------- | ---------------------------------------------------------------------- | ---------------------------------------------- |
| `defaultLocale`    | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | `en`                                           |
| `loadTranslations` | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Catálogo vacío                                 |
| `locale`           | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Cookie del navegador; después, `defaultLocale` |
| `localeCookieName` | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | `generaltranslation.locale`                    |
| `locales`          | No                                                      | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Sin restricciones                              |
| `customMapping`    | No                                                      | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Ninguno                                        |

Consulta [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options) y [`InitializeGTSPAOptions`](/docs/vue/reference/types/initialize-gt-spa-options) para ver los contratos completos de las opciones. Se admite pasar `{ ...gtConfig, loadTranslations }` al inicializador de SPA: usa los campos coincidentes e ignora los demás campos de la CLI durante el tiempo de ejecución.

## Carga del catálogo [#catalog-loading]

La ruta de salida y la del cargador deben referirse a los mismos archivos:

```ts title="src/loadTranslations.ts"
import type { LoadTranslations } from 'gt-vue';

const loadTranslations: LoadTranslations = async (locale) => {
  try {
    return (await import(`./_gt/${locale}.json`)).default;
  } catch {
    return {};
  }
};

export default loadTranslations;
```

La configuración regional predeterminada usa el texto de origen y nunca llama al loader. Los catálogos de destino cargados correctamente se almacenan en caché por plugin, y las solicitudes simultáneas para una misma configuración regional comparten una promesa. Una llamada al loader rechazada se registra y se vuelve a lanzar; no se almacena en caché, por lo que una llamada posterior puede reintentarse.

Instalar un plugin [`createGT()`](/docs/vue/reference/functions/create-gt) inicia su carga inicial en segundo plano y renderiza el contenido de origen hasta que llega el catálogo. En cambio, [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) espera a que finalice la carga inicial antes de devolver el control.

## Configuración reactiva [#reactive-setup]

Usa [`createGT()`](/docs/vue/reference/functions/create-gt) para una aplicación cliente estándar. Pasa explícitamente los campos de tiempo de ejecución, ya que `locales`, `src` y `files` no forman parte de [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options):

```ts title="src/main.ts"
import { createApp } from 'vue';
import { createGT } from 'gt-vue';
import App from './App.vue';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

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

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

Para el renderizado del lado del servidor, crea un nuevo plugin para cada solicitud, indica explícitamente la configuración regional de la solicitud y precárgalo 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;
}
```

Usa la misma configuración regional explícita y un catálogo precargado antes de hidratar el cliente. Un plugin de servidor compartido puede filtrar el estado de la configuración regional y el catálogo entre solicitudes.

## SPA de navegador [#browser-spa]

Use [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) solo en una aplicación de una sola página que se ejecute exclusivamente en el navegador y que llame a [`t()`](/docs/vue/reference/functions/t) en el ámbito del módulo. Espere a que se complete la inicialización antes de importar dinámicamente los módulos de la aplicación y, a continuación, instale exactamente el plugin devuelto:

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

La primera llamada controla el tiempo de ejecución de toda la página. Los cambios de configuración regional actualizan la cookie y recargan el documento, lo que permite que las traducciones de nivel de módulo se ejecuten de nuevo con el catálogo recién precargado. Para cambios reactivos de configuración regional sin recargar la página, usa [`createGT()`](/docs/vue/reference/functions/create-gt) y traduce las cadenas de los componentes con [`useGT()`](/docs/vue/reference/composables/use-gt).