Vue

Intégrez i1n avec Vue.js en utilisant le SDK i1n ou le mode Bridge avec vue-i18n.

Configuration

Exécutez i1n init dans votre projet Vue. Le CLI détecte automatiquement vue-i18n s'il est présent et configure le format JSON imbriqué dans votre répertoire locales/.

Vous pouvez utiliser le SDK i1n en mode autonome ou le connecter à vue-i18n via le mode Bridge.

Mode autonome

Importez init, t et setLocale depuis i1n. Chargez vos ressources de traduction et utilisez t() directement dans vos composants ou modèles.

Cette approche remplace entièrement vue-i18n. Utilisez un plugin ou un composable Vue pour fournir une commutation de locale réactive dans toute votre application.

Mode pont avec vue-i18n

Si votre projet utilise vue-i18n, connectez-le en une ligne : registerI1n((key, params) => i18n.global.t(key, params)). La fonction t() de i18n délègue à vue-i18n tout en fournissant une vérification de type stricte.

i1n gère les fichiers JSON, la traduction par IA et la génération de types. vue-i18n continue de gérer le chargement à l'exécution, l'aide de modèle $t() et la composable useI18n(). Coût de migration nul.

Déploiement

Ajoutez i1n pull à votre étape de build. Fonctionne avec les projets Vue basés sur Vite et Nuxt.

Les fichiers de traduction générés par i1n pull sont entièrement compatibles avec le chargement de fichiers 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))

Associé

Tableau de bord

Guide du tableau de bord web i1n : création de compte, organisations, clés API, édition de traductions et gestion d'équipe.

Mode pont

Conservez votre bibliothèque i18n existante tout en ajoutant la saisie semi-automatique sécurisée, la traduction IA et la gestion de fichiers de i1n.