Ehm, I am also on NPM?

My last adventure with Vue was fantastic, and I’ve also learned a lot of thing about npm, typescript and stuff like this.

I’ve so decided to create a Typescript Vue Plugin package for NPM, the Dew Translator that works in the same way of my DewLocalizationMiddleware for aspnet core.

Use

To install it:

npm install dewtranslator --save

And this is how consume with Vue:

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()));

Lets see how use it into vue pages:

 <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.getString(`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 a dictionary

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

Be careful, this is my first plugin with Ts and Vue, so maybe something can be done betther. However we already use it in some of our product. 🙂

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
}