Vue.js T9N plugin

Plugin for translation your Vue.js applications without headache.


  • 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

Getting started

import T9N from 'vue-t9n';


new Vue({
  mounted() {

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 id="app" v-t9n.deep="sectionid">
    <div>1 день</div>

Function translation (in some cases)

<div id="app">

The deep modifier is required to do translations inside slots