@eli5/vue-lang-js

Use lang.js inside Vue.js

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
412May 27, 2021Dec 8, 2017Minified + gzip package size for @eli5/vue-lang-js in KB

Readme

lang-js-vue

This plugin is based on https://github.com/rmariuzzo/Lang.js

Installation

This Vue plugin can be installed via npm or yarn

npm

$ npm install @eli5/vue-lang-js

yarn

$ yarn add @eli5/vue-lang-js

Initialization

Start by importing the component.

import Vue from 'vue'
import VueLang from '@eli5/vue-lang-js'

Vue.use(VueLang, {
    messages: source, // Provide locale file
    locale: 'nl', // Set locale
    fallback: 'en' // Set fallback lacale
})

Usage

Get language string

    this.$trans('auth.title')
    this.$trans('auth.title', { name: 'eli5' })
    {{ $trans('auth.title') }}
    {{ $trans('auth.title', { name: 'eli5' }) }}
    
    // Alias
    this.$t('auth.title')
    this.$t('auth.title', { name: 'eli5' })
    {{ $t('auth.title') }}
    {{ $t('auth.title', { name: 'eli5' }) }}

Get language string with plural

    this.$choice('auth.title', int)
    this.$choice('auth.title', int, { name: 'eli5' })
    {{ $choice('auth.title', int) }}
    {{ $choice('auth.title', int, { name: 'eli5' }) }}

    // Alias
    this.$tc('auth.title', int)
    this.$tc('auth.title', int, { name: 'eli5' })
    {{ $tc('auth.title', int) }}
    {{ $tc('auth.title', int, { name: 'eli5' }) }}

Set locale

    this.$lang.setLocale('en')

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.