From 7e8488bc669975e671ef13d278fbe3d52228ed13 Mon Sep 17 00:00:00 2001
From: Adriano Raiano <adriano@raiano.ch>
Date: Sat, 5 Jun 2021 16:23:03 +0200
Subject: [PATCH] example with http-backend

---
 examples/{ => basic}/app.js                   |  0
 examples/{ => basic}/index.html               |  2 +-
 examples/http-backend/app.js                  | 92 +++++++++++++++++++
 examples/http-backend/index.html              | 28 ++++++
 .../http-backend/locales/de/translation.json  |  8 ++
 .../http-backend/locales/en/translation.json  |  8 ++
 webpack.config.js                             |  4 +-
 7 files changed, 139 insertions(+), 3 deletions(-)
 rename examples/{ => basic}/app.js (100%)
 rename examples/{ => basic}/index.html (92%)
 create mode 100644 examples/http-backend/app.js
 create mode 100644 examples/http-backend/index.html
 create mode 100644 examples/http-backend/locales/de/translation.json
 create mode 100644 examples/http-backend/locales/en/translation.json

diff --git a/examples/app.js b/examples/basic/app.js
similarity index 100%
rename from examples/app.js
rename to examples/basic/app.js
diff --git a/examples/index.html b/examples/basic/index.html
similarity index 92%
rename from examples/index.html
rename to examples/basic/index.html
index 5a33f69..d38f99c 100644
--- a/examples/index.html
+++ b/examples/basic/index.html
@@ -5,7 +5,7 @@
     <title>vue-i18next Example</title>
     <script src="https://unpkg.com/vue@2.2.2/dist/vue.js"></script>
     <script src="https://unpkg.com/i18next@8.0.0/i18next.js"></script>
-    <script src="../dist/vue-i18next.js"></script>
+    <script src="../../dist/vue-i18next.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 {
diff --git a/examples/http-backend/app.js b/examples/http-backend/app.js
new file mode 100644
index 0000000..6839a6c
--- /dev/null
+++ b/examples/http-backend/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/examples/http-backend/index.html b/examples/http-backend/index.html
new file mode 100644
index 0000000..20cc7cc
--- /dev/null
+++ b/examples/http-backend/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/vue@2.6.13/dist/vue.js"></script>
+    <script src="https://unpkg.com/i18next@20.3.1/i18next.js"></script>
+    <script src="../../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/examples/http-backend/locales/de/translation.json b/examples/http-backend/locales/de/translation.json
new file mode 100644
index 0000000..7af50d5
--- /dev/null
+++ b/examples/http-backend/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/examples/http-backend/locales/en/translation.json b/examples/http-backend/locales/en/translation.json
new file mode 100644
index 0000000..656b130
--- /dev/null
+++ b/examples/http-backend/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}}"
+}
diff --git a/webpack.config.js b/webpack.config.js
index e101c08..bfc76e2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -31,8 +31,8 @@ module.exports = {
   devServer: {
     historyApiFallback: {
       rewrites: [
-        { from: /^\/$/, to: '/examples/index.html' },
-        { from: 'app.js', to: '/examples/app.js' },
+        { from: /^\/$/, to: '/examples/basic/index.html' },
+        { from: 'app.js', to: '/examples/basic/app.js' },
       ],
     },
     noInfo: true,