/ i18n

Vue filter extend for Vue-i18n

Vue filter extend for Vue-i18n

vue-i18n-filter

filter support extend for vue-i18n.

Install

npm install vue-i18n-filter

Usage

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

Vue.use(VueI18n)
Vue.use(VueI18nFilter)
{{ 'message.hello' | t }}
{{ 'message.greeting2' | t({ name: 'kazupon' }) }}

t, te, tc

vue-i18n-filter add filter in Vue components.
Filters t, te, tc equal to $t, $te, $tc in vue-i18n

{{ 'message.hello' | t }} // equal to $t('message.hello')

Why use filter

{{ $t('message.hello') | cap }}

v.s

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

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の林檎

GitHub