dewtranslator v1.0.8

Dew Translator

Typescript vue localization plugin.

If you need to localize your Vue's application, you can use this Plugin

Install

npm install dewtranslator --save

Import in Vue

In your entry set:

import Vue from 'vue';
import DewTranslatorPlugin, { DewTranslator, DewDictionary } from 'dewtranslator';
import ItalianDictionary from './local/it-it' // --> Our dictionary, see below
Vue.use<DewTranslator>(DewTranslatorPlugin, new DewTranslator(new ItalianDictionary()));

How to use

In your components just do

  <div>
        <h1>{{$translator.getString(`Hello`)}}</h1> // --> In dictionary Hello is 'Ciao', so it will print 'Ciao'
        <h1>{{$translator.getString(`Halo`)}}</h1> // --> In dictionary Halo doesn't exists, so it will print 'Halo?
        <h2>{{$translator.getStringF(`Your name is {0} {1}`, ['Carriage','Kato'])}}</h2> // -> This will print 'Your name is Carriage Kato' or if there is an equivalent in dictionary, for example: 'Il tuo nome è Carriage Kato'
  </div>

Define dictionaries

This is an example of a dictionary (the import './local/it-it' above)

import { DewDictionary } from 'dewtranslator'

export default class Italian extends DewDictionary
{
    constructor()
    {
        let dictionary = {
            'Hello': 'Ciao',
            'Your name is {0}' : 'Il tuo nome è {0}'
        };
        super(dictionary);
        super.tag = 'it-it';
    }
}

Change dictionary in runtime

You can also change dictionary in runtime by this way:

click(){
    this.$translator.changeDictionary(new EnglishDictionary()); // just imagine an english dictionary like above
}

Know Issues

Other

andrewdev.eu