Vue I18nNew Features
Vue I18n v9 offers not only Vue 3 support, but this version also is included new features.
Message format syntax
- See the Literal interpolation
Message functions
- See the Linked messages
- See the Pluralization
Composition API
See the Composition API advanced section
Translation Component
Support for plural prop. You can specify the number of messages to be pluralized.
The below example:
html
<template>
<i18n-t keypath="message.plural" :plural="count">
<template #n>
<b>{{ count }}</b>
</template>
</i18n-t>
</template>
<script>
import { useI18n } from 'vue-i18n'
export default {
setup() {
const { t } = useI18n({
locale: 'en',
messages: {
en: {
message: {
plural: 'no bananas | {n} banana | {n} bananas'
}
}
}
})
const count = ref(0)
return { count, t }
}
}
</script><template>
<i18n-t keypath="message.plural" :plural="count">
<template #n>
<b>{{ count }}</b>
</template>
</i18n-t>
</template>
<script>
import { useI18n } from 'vue-i18n'
export default {
setup() {
const { t } = useI18n({
locale: 'en',
messages: {
en: {
message: {
plural: 'no bananas | {n} banana | {n} bananas'
}
}
}
})
const count = ref(0)
return { count, t }
}
}
</script>DatetimeFormat Component
For Datetime localization, since Vue I18n v9, we also offer the DatetimeFormat component like the NumberFormat component.
See the Datetime localization custom formatting
i18n Custom Block
- See the
globalattribute