Vue

Integre o i1n com Vue.js usando o SDK do i1n ou o Modo Bridge com vue-i18n.

Configuração

Execute i1n init em seu projeto Vue. A CLI detecta automaticamente vue-i18n, se presente, e configura o formato JSON aninhado no seu diretório locales/.

Você pode usar o SDK do i1n no modo standalone ou conectá-lo ao vue-i18n via Modo Bridge.

Modo Independente

Importe init, t e setLocale de i1n. Carregue seus recursos de tradução e use t() diretamente em seus componentes ou templates.

Essa abordagem substitui o vue-i18n completamente. Use um plugin Vue ou um composable para fornecer troca reativa de idioma em todo o seu aplicativo.

Modo Bridge com vue-i18n

Se o seu projeto usa vue-i18n, conecte-o com uma linha: registerI1n((key, params) => i18n.global.t(key, params)). A função t() do i1n delega para o vue-i18n enquanto fornece verificação de tipo rigorosa.

i1n gerencia os arquivos JSON, a tradução por IA e a geração de tipos. vue-i18n continua a lidar com o carregamento em tempo de execução, o helper de template $t() e o composable useI18n(). Custo zero de migração.

Implantação

Adicione o i1n pull à sua etapa de build. Funciona com projetos Vue baseados em Vite e com Nuxt.

Os arquivos de tradução gerados pelo i1n pull são totalmente compatíveis com o carregamento baseado em arquivos do 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

Painel

Guia para o painel web i1n: criação de conta, organizações, chaves de API, edição de tradução e gerenciamento de equipe.

Modo Bridge

Mantenha sua biblioteca i18n existente enquanto adiciona o preenchimento automático, tradução por IA e gerenciamento de arquivos com segurança de tipo do i1n.