Very simple Vue plugin for translations

app.js

import Vue from 'vue'
import wordingPlugin from './wording.js'
import wording from './translations.json'

// here we use the plugin
Vue.use(wordingPlugin, {lang: 'fr', wording})

new Vue() // ...

Home.vue

<template>
  <div>
    <div>{{ $t('simple') }}</div>
    <div><button @click="test = 'simple'">{{$t(test)}}</button></div>
    <div>{{ $t('complicated', {nb: 3, things, feeling: 'bon', noneed: 'nothing'}) }}</div>
    <div>{{ fromData }}</div>
    <div><pre>{{ $t('plainObject') }}</pre></div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        test: 'Click me!',
        fromData: this.$t('anotherWording'),
        things: 'pommes'
      }
    }
  }
</script>

translations.json

{
  "fr": {
    "simple": "Hello, World!",
    "complicated": "j'ai mangé #{nb} #{things} et c'était #{nb} fois plus #{feeling}!",
    "anotherWording": "Ce wording a été compilé avec amour! #{notrad}",
    "plainObject": {
      "ahah": "ohoh"
    }
  }
}

wording.js

/**
 * Very simple Vue plugin for translations
 * Made by Benjamin Caradeuc <[email protected]>
 */

/**
 * Replaces parts of the string by configured ones
 * @param {String} str the string to be computed
 * @param {Object} opts the strings to be replaced with
 */
function computeString (str, opts = {}) {
  // for every string options
  Object.keys(opts).forEach((opt) => {
    // if it is suitable for replacement
    if (typeof opts[opt] === 'string' || typeof opts[opt] === 'number') {
      // create a regex for the patern: #{OPT_KEY}
      const r = new RegExp(`#{${opt}}`, 'g')
      // replace all ocurences of that patern with the corresponding value
      str = str.replace(r, opts[opt])
    }
  })
  // return the processed & cleaned String
  return str.replace(/#{\w*}/g, '')
}

const WordingPlugin = {
  /**
   * This is how we declare a Vue plugin
   * @param {*} Vue The vue instance
   * @param {Object} Options where the plugin options are passed
   */
  install (Vue, { lang = 'en', wording = {} }) {
    if(!wording[lang] === {}) console.warn('[WORDING PLUGIN] No wording provided')
    if(!wording[lang]) console.warn('[WORDING PLUGIN] this lang is not supported')
    /**
     * Methode that processes the strings in the Vue components
     * @param {String} key The key to find in the wording
     * @param {Object} opts the configurable strings to replace
     */
    Vue.prototype.$t = function (key, opts) {
      if (!wording[lang] || !wording[lang][key]) return key
      return (typeof wording[lang][key] === 'string') ? computeString(wording[lang][key], opts) : wording[lang][key]
    }
  }
}

export default WordingPlugin