Comparison with vue-i18n #

fluent-vue API is inspired by vue-i18n. But API surface is much smaller as most things are handled by Fluent syntax.

fluent-vue has only 2 methods (1 rarely used), compared to vue-i18n which has 5.

fluent-vue is compatible with Vue version 2 and version 3 with the same API.

Blog post about my motivation for switching from vue-i18n: Difficulties you might encounter when using vue-i18n in real-world Vue.js applications

Formatting #

Simple formatting API in fluent-vue is very similar to vue-i18n.

fluent-vue #

Template

$t('hello', { name: 'John' })

Message

hello = Hello {$name}

vue-i18n #

Template

$t('hello', { name: 'John' })

Message

hello = Hello {name}

Pluralization #

vue-i18n has separate method $tc for pluralization. fluent-vue uses same $t method as with simple formatting.

So in fluent-vue adding pluralization can be done without changing app code just changing localization message.

fluent-vue #

Template

$t('apples', { count: 2 })

Message

apples = { $count ->
   [0] no apples
   [one] one apple
  *[other] {$count} apples
}

vue-i18n #

Template

$tc('apples', 2, { count: 2 })

Message

apples = no apples | one apple | {count} apples

DateTime localization #

Both fluent-vue and vue-i18n use Intl.DateTimeFormat for date formatting. With vue-i18n selection of date format is responsibility of developer and not translators, and changing it requires changing app code.

In fluent-vue date format is part of localization messages and can be changed, if translation doesn't fit UI for example in some language. fluent-vue date formatting is a function call of build-in function. It can be changed by adding custom function.

fluent-vue #

Template

$t('now', { date: new Date() })

Message

now = Now is { DATETIME($date, year: "numeric", month: "short", day: "numeric") }

vue-i18n #

Setup code

new VueI18n({
  dateTimeFormats: {
    short: {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    }
  }
})

Template

$t('now', { date: $d(new Date(), 'short') })

Message

now = Now is {date}

Linked messages #

fluent-vue #

Message

world = World
hello = Hello,
linked = { hello } { world }!

vue-i18n #

Message

world = World
hello = Hello,
linked = @:message.hello @:message.world!