From 63bb34ef997bed202f3f208645e14861318e66ef Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 27 Feb 2021 13:52:49 +0100
Subject: [PATCH] basic demo for i18n integration along with i18n-ally

---
 .vscode/settings.json       |  5 +++++
 package.json                |  1 +
 src/components/Register.vue |  2 +-
 src/locales/de.json         |  5 +++++
 src/locales/en.json         |  5 +++++
 src/main.js                 | 20 +++++++++++++++++---
 6 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 src/locales/de.json
 create mode 100644 src/locales/en.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..4e71344
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "i18n-ally.localesPaths": [
+        "src/locales"
+    ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 75eba11..e094841 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "toastify-js": "^1.9.3",
     "validator": "^13.5.2",
     "vue": "^3.0.5",
+    "vue-i18n": "^9.0.0",
     "vue-phone-number-input": "^1.1.10",
     "vue-router": "4"
   },
diff --git a/src/components/Register.vue b/src/components/Register.vue
index a1040d9..9ceb311 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -7,7 +7,7 @@
       >Lauf für Kaya! - Registrieren</h1>
       <p
         class="mx-auto leading-relaxed text-base text-center"
-      >Jetzt für den Lauf für Kaya! 2021 registrieren.</p>
+      >{{ $t('register.register_now') }}</p>
       <div class="mt-4">
         <label for="first_name" class="block font-medium">
           Vorname
diff --git a/src/locales/de.json b/src/locales/de.json
new file mode 100644
index 0000000..9936ebe
--- /dev/null
+++ b/src/locales/de.json
@@ -0,0 +1,5 @@
+{
+	"register": {
+		"register_now": "Jetzt für den Lauf für Kaya! 2021 registrieren."
+	}
+}
diff --git a/src/locales/en.json b/src/locales/en.json
new file mode 100644
index 0000000..b32d817
--- /dev/null
+++ b/src/locales/en.json
@@ -0,0 +1,5 @@
+{
+	"register": {
+		"register_now": "Register now for Lauf für Kaya! 2021."
+	}
+}
diff --git a/src/main.js b/src/main.js
index 640fb1b..4aa21d4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,21 @@
 import { createApp } from 'vue';
-import { createWebHashHistory, createRouter } from 'vue-router';
+import { createWebHistory, createWebHashHistory, createRouter } from 'vue-router';
 import App from './App.vue';
+import { createI18n } from 'vue-i18n';
 import 'windi.css';
 import 'toastify-js/src/toastify.css';
+import * as keys_en from './locales/en.json';
+import * as keys_de from './locales/de.json';
+
+const messages = {
+	en: keys_en,
+	de: keys_de
+};
+const i18n = createI18n({
+	locale: 'de',
+	fallbackLocale: 'en',
+	messages
+});
 
 // ---------------
 const Home = import('./components/Home.vue');
@@ -10,7 +23,8 @@ const Register = import('./components/Register.vue');
 const Profile = import('./components/Profile.vue');
 //
 const router = createRouter({
-	history: createWebHashHistory(),
+	// history: createWebHashHistory(),
+	history: createWebHistory(),
 	routes: [
 		{ path: '/', component: Home },
 		{ path: '/register', component: Register },
@@ -18,4 +32,4 @@ const router = createRouter({
 	]
 });
 // ---------------
-createApp(App).use(router).mount('#app');
+createApp(App).use(i18n).use(router).mount('#app');