basic demo for i18n integration along with i18n-ally

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "i18n-ally.localesPaths": [
+        "src/locales"
+    ]
+}

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"
   },

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

src/locales/de.json

@@ -0,0 +1,5 @@
+{
+	"register": {
+		"register_now": "Jetzt für den Lauf für Kaya! 2021 registrieren."
+	}
+}

src/locales/en.json

@@ -0,0 +1,5 @@
+{
+	"register": {
+		"register_now": "Register now for Lauf für Kaya! 2021."
+	}
+}

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');