Vue

Интегрируйте i1n с Vue.js, используя i1n SDK или режим Bridge Mode с vue-i18n.

Настройка

Запустите i1n init в вашем проекте Vue. CLI автоматически обнаружит vue-i18n, если он присутствует, и настроит вложенный формат JSON в вашем каталоге locales/.

Вы можете использовать i1n SDK в автономном режиме или подключить его к vue-i18n через Bridge Mode.

Автономный режим

Импортируйте init, t и setLocale из i1n. Загрузите ваши ресурсы перевода и используйте t() непосредственно в ваших компонентах или шаблонах.

Этот подход полностью заменяет vue-i18n. Используйте плагин Vue или композитную функцию для обеспечения реактивного переключения локали во всем вашем приложении.

Режим моста с vue-i18n

Если ваш проект использует vue-i18n, подключите его одной строкой: registerI1n((key, params) => i18n.global.t(key, params)). Функция i18n t() делегирует вызовы vue-i18n, обеспечивая строгую проверку типов.

i1n управляет JSON-файлами, AI-переводом и генерацией типов. vue-i18n продолжает обрабатывать загрузку во время выполнения, вспомогательную функцию шаблона $t() и композицию useI18n(). Нулевая стоимость миграции.

Развертывание

Добавьте i1n pull в свой шаг сборки. Работает как с проектами Vue на базе Vite, так и с Nuxt.

Файлы перевода, сгенерированные командой i1n pull, полностью совместимы с загрузкой файлов 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))

Связанное

Панель управления

Руководство по веб-панели i1n: создание учетной записи, организации, ключи API, редактирование переводов и управление командой.

Режим моста

Сохраните существующую библиотеку i18n, добавив при этом безопасный автозаполнитель i1n, перевод с помощью ИИ и управление файлами.