• This repository has been archived on 22/Mar/2023
  • Stars
    star
    6
  • Rank 2,539,965 (Top 51 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 6 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Plugin for translation your Vue.js applications without headache

Vue.js T9N plugin

Advantages

  • No need to write keys to text in data set
  • The directive can be defined once for component and works for all child tags
  • Ability to write section specific translations
  • Translation data set can be represented as relational model
  • Regexp support

Demo

Getting started

import T9N from 'vue-t9n';

Vue.use(T9N);


new Vue({
  mounted() {
    this.$setTranslations(dataset);
    this.$setLocale('ua');
  }
});

Dataset example:

[
    ['1 день', {en: '1 day', ua: '1 день'}],
    [/^([2-4]) дня$/, {en: '$1 days', ua: '$1 дні'}],
    [/^(\d*) дней$/, {en: '$1 days', ua: '$1 днів'}],
    ['плагин', {en: "plugin", ua: 'плагін'},'sectionid'] // section name in lowercase
]

Component's template:

<div id="app" v-t9n>
    <div>{{days}} дней</div>
</div>
<div id="app" v-t9n.deep="sectionid">
    <p>плагин</p>
    <div>1 день</div>
</div>

Function translation (in some cases)

<div id="app">
    <p>{{$t('плагин')}}</p>
</div>

The deep modifier is required to do translations inside slots