Vue

Integrieren Sie i1n mit Vue.js mithilfe des i1n SDK oder des Bridge-Modus mit vue-i18n.

Einrichtung

Führen Sie "i1n init" in Ihrem Vue-Projekt aus. Die CLI erkennt "vue-i18n" automatisch, falls vorhanden, und konfiguriert das verschachtelte JSON-Format in Ihrem locales/-Verzeichnis.

Sie können das i1n SDK im Standalone-Modus verwenden oder es über den Bridge-Modus mit vue-i18n verbinden.

Eigenständiger Modus

Importieren Sie init, t und setLocale von i1n. Laden Sie Ihre Übersetzungsressourcen und verwenden Sie t() direkt in Ihren Komponenten oder Vorlagen.

Dieser Ansatz ersetzt vue-i18n vollständig. Verwenden Sie ein Vue-Plugin oder eine Composable, um eine reaktive Sprachumschaltung in Ihrer gesamten Anwendung bereitzustellen.

Bridge-Modus mit vue-i18n

Wenn Ihr Projekt vue-i18n verwendet, verbinden Sie es mit einer Zeile: registerI1n((key, params) => i18n.global.t(key, params)). Die i1n t()-Funktion delegiert an vue-i18n und bietet gleichzeitig eine strenge Typüberprüfung.

i1n verwaltet die JSON-Dateien, die KI-Übersetzung und die Typengenerierung. vue-i18n kümmert sich weiterhin um das Laufzeit-Laden, den $t()-Template-Helfer und das useI18n()-Composable. Keine Migrationskosten.

Bereitstellung

Fügen Sie i1n pull zu Ihrem Build-Schritt hinzu. Funktioniert sowohl mit Vite-basierten Vue-Projekten als auch mit Nuxt.

Von i1n pull generierte Übersetzungsdateien sind vollständig mit der dateibasierten Ladung von vue-i18n kompatibel.

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))

Verwandt