# Vue: Inicio rápido
URL: https://generaltranslation.com/es/docs/vue/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Añade varios idiomas a una aplicación Vue en menos de 10 minutos.

Al final de esta guía, tu aplicación de Vue mostrará contenido en varios idiomas y permitirá a los usuarios cambiar la configuración regional activa sin recargar la página.

`gt-vue` funciona como un plugin de Vue. El plugin carga cada catálogo de traducción una vez, lo almacena en caché y vuelve a renderizar de forma reactiva el contenido traducido cuando cambia la configuración regional.

**Requisitos previos:**

* Una aplicación de Vue 3, versión 3.3 o posterior
* Node.js `^20.19.0 || >=22.12.0` para las herramientas actuales de Vite

<Callout type="info">
  **Paquete 0.x:** `gt-vue` es inestable. Su API y su comportamiento pueden cambiar entre versiones de forma independiente de los paquetes React estables.
</Callout>

## Inicio rápido [#quickstart]

### 1. Instala los paquetes

`gt-vue` habilita las traducciones en tu aplicación. [`gt`](/docs/cli/quickstart) extrae el contenido de origen y genera catálogos de traducción.

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install gt-vue
    npm install --save-dev gt
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-vue
    yarn add --dev gt
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-vue
    bun add --dev gt
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-vue
    pnpm add --save-dev gt
    ```
  </Tab>
</Tabs>

### 2. Crea un archivo de configuración de traducción

Crea `gt.config.json` en la raíz de tu proyecto. Configura el idioma en el que está escrito el contenido fuente, las configuraciones regionales a las que se traducirá y la ruta de salida de los catálogos generados.

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr", "ja"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

* `defaultLocale` es el idioma de tu contenido de origen.
* `locales` enumera los idiomas de destino. Elige cualquier configuración regional de la [lista de configuraciones regionales compatibles](/docs/platform/dashboard/reference/supported-locales).
* `files.gt.output` indica a la CLI dónde guardar cada catálogo. Mantén el marcador de posición `[locale]` en la ruta.

### 3. Crea un cargador de traducciones

Crea un cargador que devuelva el catálogo generado para la configuración regional solicitada:

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

El loader no se invoca para la configuración regional predeterminada porque el contenido de origen ya es su catálogo. Devolver un objeto vacío permite que la aplicación renderice el contenido de origen cuando no hay disponible un catálogo de destino.

### 4. Registra el plugin

Crea un plugin con [`createGT()`](/docs/vue/reference/functions/create-gt) e instálalo antes de montar tu aplicación:

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

El plugin usa la cookie de configuración regional guardada si existe; de lo contrario, comienza con `defaultLocale`. Se monta de inmediato con el contenido de origen y luego se actualiza de forma reactiva cuando termina de cargarse el catálogo solicitado.

### 5. Marcar contenido para traducir

Usa [`<T>`](/docs/vue/reference/components/t) para contenido enriquecido en plantillas y [`useGT()`](/docs/vue/reference/composables/use-gt) para cadenas independientes, como los atributos de entrada:

```vue title="src/App.vue"
<script setup lang="ts">
import { T, useGT } from 'gt-vue';

const gt = useGT();
</script>

<template>
  <main>
    <T>
      <h1>Welcome to my app</h1>
      <p>This content will be translated automatically.</p>
    </T>

    <input :placeholder="gt('Search products')" />
  </main>
</template>
```

Mantén estático el contenido dentro de [`<T>`](/docs/vue/reference/components/t). Usa [componentes de variables y ramificación](/docs/vue/guides/formatting-variables) para valores en tiempo de ejecución y alternativas condicionales.

### 6. Agrega un selector de idioma

Obtén la configuración regional actual con [`useLocale()`](/docs/vue/reference/composables/use-locale) y cámbiala con [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale):

```vue title="src/App.vue"
<script setup lang="ts">
import { T, useGT, useLocale, useSetLocale } from 'gt-vue';
import gtConfig from '../gt.config.json';

const gt = useGT();
const locale = useLocale();
const setLocale = useSetLocale();
const locales = [gtConfig.defaultLocale, ...gtConfig.locales];

async function changeLocale(event: Event) {
  const target = event.target as HTMLSelectElement;
  await setLocale(target.value);
}
</script>

<template>
  <main>
    <label>
      Language
      <select :value="locale" @change="changeLocale">
        <option v-for="code in locales" :key="code" :value="code">
          {{ code }}
        </option>
      </select>
    </label>

    <T>
      <h1>Welcome to my app</h1>
      <p>This content will be translated automatically.</p>
    </T>

    <input :placeholder="gt('Search products')" />
  </main>
</template>
```

[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) carga un catálogo que falta antes de guardar la cookie de configuración regional y volver a renderizar los consumidores reactivos. Con el loader anterior, si falta un archivo, se devuelve un catálogo vacío, se cambia la configuración regional y se renderiza el contenido de origen. Si, en cambio, un loader genera un rechazo, la configuración regional actual permanece activa.

### 7. Autentícate y traduce

Autentícate en General Translation:

```bash
npx gt auth
```

El comando te guiará para iniciar sesión y crear credenciales. Guarda la clave de API de producción generada en tu archivo de entorno local, fuera del código del navegador y del control de versiones.

A continuación, genera los catálogos de traducción:

```bash
npx gt translate
```

La CLI analiza tu código fuente de Vue, traduce el contenido extraído y genera un archivo JSON por cada configuración regional de destino en `src/_gt/`. Vuelve a ejecutar el comando cada vez que cambie el contenido de origen.

### 8. Ejecutar y verificar

Inicia la aplicación:

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm run dev
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dev
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun run dev
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dev
    ```
  </Tab>
</Tabs>

Abre la URL local que muestra tu servidor de desarrollo. Elige `es`, `fr` o `ja` en el selector de idioma y comprueba que el encabezado y el marcador de posición del campo de búsqueda muestren el texto traducido.

## Solución de problemas [#troubleshooting]

<Accordions>
  <Accordion title="La aplicación se mantiene en la configuración regional de origen">
    La configuración regional activa se almacena en la cookie `generaltranslation.locale`. Elimina cualquier cookie obsoleta y vuelve a seleccionar la configuración regional de destino. Confirma también que el archivo JSON correspondiente exista en `src/_gt/` y que el loader devuelva su exportación predeterminada.
  </Accordion>

  <Accordion title="Una cadena traducida no se actualiza al cambiar de configuración regional">
    Llama a la función que devuelve [`useGT()`](/docs/vue/reference/composables/use-gt) desde el template o desde un valor calculado de Vue. Una cadena traducida una vez durante la configuración es una instantánea y no se vuelve a ejecutar cuando cambia el estado reactivo de la configuración regional.
  </Accordion>
</Accordions>

## Next steps

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

## Sitemap

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