Vue

Integra i1n con Vue.js usando l'SDK di i1n o la Modalità Bridge con vue-i18n.

Configurazione

Esegui i1n init nel tuo progetto Vue. La CLI rileva automaticamente vue-i18n se presente e configura il formato JSON nidificato nella tua directory locales/.

Puoi usare l'SDK di i1n in modalità standalone o collegarlo a vue-i18n tramite Bridge Mode.

Modalità Autonoma

Importa init, t e setLocale da i1n. Carica le tue risorse di traduzione e usa t() direttamente nei tuoi componenti o template.

Questo approccio sostituisce completamente vue-i18n. Utilizza un plugin o un composable di Vue per fornire un cambio di locale reattivo in tutta la tua applicazione.

Modalità Bridge con vue-i18n

Se il tuo progetto utilizza vue-i18n, collegalo con una riga: registerI1n((key, params) => i18n.global.t(key, params)). La funzione t() di i1n delega a vue-i18n fornendo al contempo un controllo rigoroso dei tipi.

i1n gestisce i file JSON, la traduzione AI e la generazione di tipi. vue-i18n continua a gestire il caricamento in fase di runtime, l'helper di template $t() e il composable useI18n(). Costo di migrazione zero.

Distribuzione

Aggiungi i1n pull al tuo passaggio di build. Funziona sia con progetti Vue basati su Vite che con Nuxt.

I file di traduzione generati da i1n pull sono completamente compatibili con il caricamento basato su file di 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))

Correlato

Cruscotto

Guida alla dashboard web di i1n: creazione account, organizzazioni, chiavi API, modifica traduzioni e gestione del team.

Modalità Bridge

Mantieni la tua libreria i18n esistente aggiungendo l'autocompletamento type-safe, la traduzione AI e la gestione dei file di i1n.