vue-i18n-filters v1.0.2-b4

Vue-i18n-filters ·

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

Installation

npm install vue-i18n-filters

import VueI18n from 'vue-i18n'
import VueI18nFilters from 'vue-i18n-filters'

Vue.use(VueI18n)
Vue.use(VueI18nFilters)

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-filters. differs from vue-i18n-filter. vue-i18n-filters allow you to extend its own filters syntax with the selector

import VueI18n from 'vue-i18n'
import VueI18nFilters from 'vue-i18n-filters'                                                             Vue.use(VueI18n)                                     Vue.use(VueI18nFilters, {
   t: "translate"
})

now you can use

{{ 'Xin chào' | translate }} // hello

instead

{{ 'Xin chào' | t }} // hello

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