Vue

Integrate i1n with Vue.js using the i1n SDK or Bridge Mode with vue-i18n.

Setup

Run i1n init in your Vue project. The CLI auto-detects vue-i18n if present and configures nested JSON format in your locales/ directory.

You can use the i1n SDK in standalone mode or connect it to vue-i18n via Bridge Mode.

Standalone Mode

Import init, t, and setLocale from i1n. Load your translation resources and use t() directly in your components or templates.

This approach replaces vue-i18n entirely. Use a Vue plugin or composable to provide reactive locale switching across your application.

Bridge Mode with vue-i18n

If your project uses vue-i18n, connect it with one line: registerI1n((key, params) => i18n.global.t(key, params)). The i1n t() function delegates to vue-i18n while providing strict type checking.

i1n manages the JSON files, AI translation, and type generation. vue-i18n continues to handle runtime loading, the $t() template helper, and the useI18n() composable. Zero migration cost.

Deployment

Add i1n pull to your build step. Works with both Vite-based Vue projects and Nuxt.

Translation files generated by i1n pull are fully compatible with vue-i18n's file-based loading.

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

Dashboard

Guide to the i1n web dashboard: account creation, organizations, API keys, translation editing, and team management.

Bridge Mode

Keep your existing i18n library while adding i1n's type-safe autocomplete, AI translation, and file management.

Vue