panter · adrai · Jun 5, 2021
diff --git a/examples/app.js → examples/basic/app.js b/examples/app.js → examples/basic/app.js
diff --git a/examples/index.html → examples/basic/index.html b/examples/index.html → examples/basic/index.html
@@ -5,7 +5,7 @@
     <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="../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
@@ -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
@@ -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="../../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
@@ -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
@@ -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
@@ -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,