# Vue: Configuración
URL: https://generaltranslation.com/es/docs/vue/reference/config.mdx
Docs index: https://generaltranslation.com/llms.txt
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 texto 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 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` y `customMapping` se comparten en todas las superficies, mientras que `locales` lo acepta el inicializador de SPA.

## `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 proyecto 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 cualquiera de los tiempos de ejecución. [`createGT()`](/docs/vue/reference/functions/create-gt) usa mapeos de objetos con un `code` válido para el formateo y las reglas de plural; [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) también los usa para la coincidencia de configuraciones regionales compatibles. |

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.

## Extracción en Vue [#vue-extraction]

Las opciones del compilador de plantillas de Vue afectan al contenido extraído y a su translation hash. De forma predeterminada, el extractor detecta estas opciones a partir de la configuración activa de Vite o Nuxt. Configúralas explícitamente cuando la detección automática resulte ambigua o cuando tu aplicación use valores personalizados:

| Option                                                | Description                                                               | Type                       | Optional | predeterminado                                                           |
| ----------------------------------------------------- | ------------------------------------------------------------------------- | -------------------------- | -------- | ----------------------------------------------------------------- |
| `files.gt.parsingFlags.vueCompilerOptions.whitespace` | Coincide con el manejo de espacios en blanco de las plantillas de Vue.    | `'condense' \| 'preserve'` | Sí       | Opción detectada y, en su defecto, el valor predeterminado de Vue |
| `files.gt.parsingFlags.vueCompilerOptions.delimiters` | Coincide con delimitadores de interpolation personalizados en plantillas. | `[string, string]`         | Sí       | Opción detectada y, en su defecto, `['{{', '}}']`                 |
| `files.gt.parsingFlags.viteConfigPath`                | Selecciona una configuración de Vite relativa a la raíz del proyecto.            | `string`                   | Sí       | Detección automática                                              |

```json title="gt.config.json"
{
  "files": {
    "gt": {
      "parsingFlags": {
        "vueCompilerOptions": {
          "whitespace": "preserve",
          "delimiters": ["${", "}"]
        },
        "viteConfigPath": "config/vite.app.ts"
      }
    }
  }
}
```

Mantén estos valores idénticos a los del compilador de la aplicación. Cambiar los espacios en blanco o los delimitadores puede alterar el texto de origen e invalidar los translation hashes existentes.

Para los path aliases de TypeScript o JavaScript, pasa el config file a la CLI:

```bash
npx gt translate --tsconfig config/tsconfig.app.json
```

`--tsconfig` y su alias `--jsconfig` son opciones de línea de comandos, no campos de `gt.config.json`. Si se omiten, la extracción localiza el config disponible más cercano.

## 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`    | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`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).

## Sitemap

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