Comparison with vue-i18n

Formatting

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

fluent-vue

Template

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

Message

hello = Hello {$name}
1

vue-i18n

Template

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

Message

hello = Hello {name}
1

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

Message

apples = { $count ->
   [0] no apples
   [one] one apple
  *[other] {$count} apples
}
1
2
3
4
5

vue-i18n

Template

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

Message

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

DateTime localization

Both fluent-vue and vue-i18n use Intl.DateTimeFormatopen in new window 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() })
1

Message

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

vue-i18n

Setup code

new VueI18n({
  dateTimeFormats: {
    short: {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    }
  }
})
1
2
3
4
5
6
7
8
9

Template

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

Message

now = Now is {date}
1

Linked messages

fluent-vue

Message

world = World
hello = Hello,
linked = { hello } { world }!
1
2
3

vue-i18n

Message

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