Vue

Integra i1n con Vue.js usando el SDK de i1n o el Modo Bridge con vue-i18n.

Configuración

Ejecuta __VAR_1__ i1n init en tu proyecto Vue. La CLI detecta automáticamente vue-i18n si está presente y configura el formato JSON anidado en tu directorio locales/.

Puedes usar el SDK de i1n en modo independiente o conectarlo a vue-i18n a través del Modo Puente.

Modo Independiente

Importa init, t y setLocale desde i1n. Carga tus recursos de traducción y usa t() directamente en tus componentes o plantillas.

Este enfoque reemplaza completamente vue-i18n. Utilice un plugin o composable de Vue para proporcionar un cambio de locale reactivo en toda su aplicación.

Modo Puente con vue-i18n

Si tu proyecto usa vue-i18n, conéctalo con una línea: registerI1n((key, params) => i18n.global.t(key, params)). La función t() de i1n delega a vue-i18n mientras proporciona una verificación de tipos estricta.

i1n administra los archivos JSON, la traducción de IA y la generación de tipos. vue-i18n continúa manejando la carga en tiempo de ejecución, el helper de plantilla $t() y el composable useI18n(). Costo de migración cero.

Despliegue

Agregá i1n pull a tu paso de compilación. Funciona tanto con proyectos Vue basados en Vite como con Nuxt.

Los archivos de traducción generados por i1n pull son totalmente compatibles con la carga de archivos de vue-i18n.

src/App.vue

<template>
  <h1>{{ $t('welcome') }}</h1>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

Bridge Mode — src/i18n.ts

import { registerI1n } from 'i1n'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({ /* ... */ })
registerI1n((key, params) => i18n.global.t(key, params))

Relacionado

Panel

Guía del panel web de i1n: creación de cuentas, organizaciones, claves de API, edición de traducciones y gestión de equipos.

Modo Puente

Conservá tu biblioteca i18n existente mientras agregás el autocompletado con seguridad de tipos, la traducción con IA y la gestión de archivos de i1n.