chiaweilee / vue-i18n-filter

🌐 { 'vue-i18n' | t }

Vue-I18n-filter ·

Vue-I18n-filter is a Vue filter mix-in for Vue-I18n, which allow you use Vue filter to declare Vue-i18n.

Installation

npm install vue-i18n-filter

import VueI18n from 'vue-i18n'
import VueI18nFilter from 'vue-i18n-filter'

Vue.use(VueI18n)
Vue.use(VueI18nFilter)

Usage

Vue filters t, te, tc will mixed-in, equal effect with $t, $te, $tc of vue-i18n.

avoid to declare Vue filter name as t, te or tc in component when using Vue-i18n-filter.

Basic usage

{{ '你好' | t }} // hello

Example

var message = {
    ja: {
        message: {
          hello: 'こんにちは、世界',
          greeting: 'やあ！',
          greeting2: 'やあ {name}！',
          apple: '林檎ってしまった | one 林檎 | {count}の林檎'
        }
    }
}

{{ 'message.hello' | t }} // こんにちは、世界

{{ 'message.greeting2' | t({ name: 'kazupon' }) }} // やあ kazupon！

{{ 'message.hello' | te('en') }} // true

{{ 'message.apple' | tc(0) }} // 林檎ってしまった

{{ 'message.apple' | tc(10, { count: 10 }) }} // 10の林檎

filters chain example

translate and capitalize

{{ 'message.hello' | t | capitalize }}