Migration from vue-i18n

Full replacement

This guide covers a complete migration from vue-i18n to Fluenti. If you need to coexist with vue-i18n during migration, see the Bridge guide instead.

Step 1: Install Fluenti

pnpm add @fluenti/vue @fluenti/vite-plugin @fluenti/cli

Step 2: Replace Plugin Setup

// Before (vue-i18n)
import { createI18n } from 'vue-i18n'
const i18n = createI18n({ locale: 'en', messages: { en, zhCN } })
app.use(i18n)

// After (Fluenti)
import { createFluentVue } from '@fluenti/vue'
const i18n = createFluentVue({ locale: 'en', messages: { en, 'zh-CN': zhCN } })
app.use(i18n)

Step 3: Replace Template Usage

<!-- Before -->
<p>{{ $t('hello', { name: userName }) }}</p>

<!-- After — Option A: v-t directive -->
<p v-t>Hello {{ userName }}</p>

<!-- After — Option B: keep $t() (works as-is) -->
<p>{{ $t('hello', { name: userName }) }}</p>

Step 4: Replace Script Usage

<script setup>
// Before
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const msg = t('greeting')

// After — no imports needed
const msg = t('greeting')
</script>

Step 5: Update Vite Config

import fluentiPlugin from '@fluenti/vite-plugin'

export default defineConfig({
  plugins: [vue(), fluentiPlugin()],
})

API Mapping

vue-i18n	Fluenti
`$t(key)`	`$t(key)` (same)
`$d(date)`	`$d(date)` (same)
`$n(num)`	`$n(num)` (same)
`useI18n()`	`useI18n()` (same)
`$tc(key, count)`	`t(key, { count })` with ICU plural syntax
`$te(key)`	`te(key)` (same)
`<i18n-t>`	`<Trans>`
Pipe-separated plurals	ICU `{count, plural, ...}` syntax
Manual key files	Automatic extraction with `fluenti extract`
`@nuxtjs/i18n`	`@fluenti/nuxt`

Plural syntax migration

// vue-i18n pipe-separated
"items": "no items | one item | {count} items"

// Fluenti ICU MessageFormat
"items": "{count, plural, =0 {no items} one {# item} other {# items}}"