Basic exploration of vue-i18next (https://github.com/rse/vue-i18next) with demo link http://bl.ocks.org/ThomasG77/415ade3a505b7cf321528352032beecc by ThomasG77

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue-i18next demo</title>
    <script src="https://rawgit.com/i18next/i18next/master/i18next.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://rawgit.com/rse/vue-params/master/vue-params.js"></script>
    <script src="https://rawgit.com/rse/vue-i18next/master/vue-i18next.js"></script>
  </head>
  <body>
    <div id="sample">
        {{ $t("foo")}}
        {{ $t("bar.baz") }}
    </div>

    <script>

    Vue.use(VueParams);
    Vue.use(VueI18Next);

    Vue.params.i18nextLanguage = "en";

    var abc = i18next.init({
      lng: Vue.params.i18nextLanguage,
      resources: {
        en: {
          translation: {
            "hello": "Hello world",
            "foo": "foooooTBalllll",
            "bar": {
              "baz": "England"
            }
          }
        },
        de: {
          translation: {
            "hello": "Hallo Welt",
            "foo": "fooooo",
            "bar": {
              "baz": "Germany"
            }
          }
        }
      }
    });

    // You can add i18nextNamespace key with the namespace you want.
    // See doc at //i18next.com/translate/namespace/
    var vue = new Vue({
      el: document.querySelector('#sample')
    });
    </script>
  </body>
</html>