vue2 example

i18next · Feb 26, 2022 · d6f745f · d6f745f
1 parent 2365cbb
commit d6f745f
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 0 deletions.
diff --git a/example/vue2/app.js b/example/vue2/app.js
@@ -0,0 +1,92 @@
+/* eslint-disable no-undef, new-cap */
+
+i18next.use(i18nextHttpBackend).init({
+  debug: true,
+  lng: 'en',
+  fallbackLng: 'en',
+  backend: {
+    loadPath: './locales/{{lng}}/{{ns}}.json'
+  }
+}, () => {
+  const i18n = new VueI18next(i18next);
+
+  Vue.component('app', {
+    template: `
+    <div>
+      <div>
+          <h3>Translation</h3>
+          <language-changer></language-changer>
+          <p>$t: {{ $t("message.hello") }}</p>
+      </div>
+      <div>
+        <h3>Interpolation</h3>
+        <i18next path="term" tag="label" for="tos">
+          <a href="#" target="_blank">{{ $t("tos") }}</a>
+          <strong>a</strong>
+        </i18next>
+      </div>
+      <div>
+        <h3>Prefix</h3>
+        <key-prefix></key-prefix>
+      </div>
+      <div>
+        <h3>Inline translations</h3>
+        <inline-translations></inline-translations>
+      </div>
+      <div>
+        <h3>Directive</h3>
+        <with-directive></with-directive>
+      </div>
+    </div>`,
+  });
+
+  Vue.component('language-changer', {
+    template: `
+      <div>
+        <a v-on:click="changeLanguage('de')">DE</a>
+        &nbsp;|&nbsp;
+        <a v-on:click="changeLanguage('en')">EN</a>
+      </div>`,
+    methods: {
+      changeLanguage(lang) {
+        this.$i18n.i18next.changeLanguage(lang);
+      },
+    },
+  });
+
+  Vue.component('key-prefix', {
+    i18nOptions: {
+      keyPrefix: 'message',
+    },
+    template: `
+      <div>
+        <p>{{$t('hello')}}</p>
+      </div>`,
+  });
+
+  Vue.component('inline-translations', {
+    i18nOptions: {
+      messages: {
+        en: {
+          welcome: 'Welcome!',
+        },
+        de: {
+          welcome: 'Guten Tag!',
+        },
+      },
+    },
+    template: `
+      <div>
+        {{$t('welcome')}}
+      </div>`,
+  });
+
+  Vue.component('with-directive', {
+    template: `
+      <div v-t="{path:'message.hello'}"></div>`,
+  });
+
+  new Vue({
+    i18n,
+  }).$mount('#app');
+});
diff --git a/example/vue2/index.html b/example/vue2/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>vue-i18next Example</title>
+    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
+    <script src="https://unpkg.com/[email protected]/i18next.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@panter/[email protected]/dist/vue-i18next.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/i18next/i18next-http-backend/i18nextHttpBackend.js"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <style media="screen">
+      body {
+        height: 100%;
+      }
+      #app {
+        max-width: 800px;
+        margin: 40px;
+      }
+
+    </style>
+</head>
+<body>
+  <div id="app">
+    <app />
+  </div>
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/example/vue2/locales/de/translation.json b/example/vue2/locales/de/translation.json
@@ -0,0 +1,8 @@
+{
+  "message": {
+    "hello": "Hallo!! - DE"
+  },
+  "tos": "Nutzungsbedingungen",
+  "term": "Ich akzeptiere {{0}}. {{1}}",
+  "loadbundle": "Bundle Laden {{lang}}"
+}
diff --git a/example/vue2/locales/en/translation.json b/example/vue2/locales/en/translation.json
@@ -0,0 +1,8 @@
+{
+  "message": {
+    "hello": "Hello!! - EN"
+  },
+  "tos": "Term of Service",
+  "term": "I accept {{1}} {{0}}.",
+  "loadbundle": "Load Bundle {{lang}}"
+}