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!