🌎 basic i18n keys for Register component

.vscode/settings.json

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

src/components/Register.vue

@@ -5,12 +5,10 @@
       <h1
         class="sm:text-3xl text-2xl font-medium title-font mb-4 text-center"
       >Lauf für Kaya! - Registrieren</h1>
-      <p
+      <p class="mx-auto leading-relaxed text-base text-center">{{ $t('register.register_now') }}</p>
-        class="mx-auto leading-relaxed text-base text-center"
-      >{{ $t('register.register_now') }}</p>
       <div class="mt-4">
         <label for="first_name" class="block font-medium">
-          Vorname
+          {{ $t('vorname') }}
           <span class="font-bold">*</span>
         </label>
         <input
@@ -18,22 +16,22 @@
           name="firstname"
           id="first_name"
           autocomplete="off"
-          placeholder="Vorname"
+          :placeholder="[[$t('vorname')]]"
           type="text"
           class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
         />
-        <label for="middle_name" class="block font-medium">Mittelname</label>
+        <label for="middle_name" class="block font-medium">{{ $t('mittelname') }}</label>
         <input
           v-model="userdetails.middlename"
           name="middlename"
           id="middle_name"
           autocomplete="off"
-          placeholder="Mittelname"
+          :placeholder="[[$t('mittelname')]]"
           type="text"
           class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
         />
         <label for="last_name" class="block font-medium">
-          Nachname
+          {{ $t('nachname') }}
           <span class="font-bold">*</span>
         </label>
         <input
@@ -41,7 +39,7 @@
           name="lastname"
           id="last_name"
           autocomplete="off"
-          placeholder="Nachname"
+          :placeholder="[[$t('nachname')]]"
           type="text"
           class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
         />
@@ -59,7 +57,7 @@
           :class="{ 'border-red-500': (!isEmail(userdetails.mail)), 'border-gray-300': (isEmail(userdetails.mail)) }"
           class="dark:bg-gray-800 mt-1 block w-full shadow-sm rounded-l-md sm:text-sm border bg-gray-50 text-gray-100 rounded-md p-2"
         />
-        <p class="text-sm">Bitte geben Sie eine gültige E-Mail Adresse an</p>
+        <p class="text-sm">{{ $t('please_provide_valid_mail') }}</p>
         <div class="grid grid-cols-6 mt-6">
           <div class="col-span-6"></div>
           <div class="flex items-start col-span-6">
@@ -73,37 +71,40 @@
               />
             </div>
             <div class="ml-3 text-sm">
-              <label for="address_activated" class="font-medium text-gray-400">Adresse angeben?</label>
+              <label
+                for="address_activated"
+                class="font-medium text-gray-400"
+              >{{ $t('provide_address') }}</label>
             </div>
           </div>
           <div v-if="provide_address === true" class="col-span-6">
             <div class="col-span-6">
-              <label for="street" class="block font-medium">Straße</label>
+              <label for="street" class="block font-medium">{{ $t('strasse') }}</label>
               <input
                 type="text"
                 name="street"
-                placeholder="Straße"
+                :placeholder="[[$t('strasse')]]"
                 id="street"
                 autocomplete="street-address"
                 class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>
             <div class="col-span-6 sm:col-span-6 lg:col-span-2">
-              <label for="city" class="block font-medium">Ort</label>
+              <label for="city" class="block font-medium">{{ $t('ort') }}</label>
               <input
                 type="text"
                 name="city"
-                placeholder="Ort"
+                :placeholder="[[$t('ort')]]"
                 id="city"
                 class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>
             <div class="col-span-6 sm:col-span-3 lg:col-span-2">
-              <label for="postal_code" class="block font-medium">PLZ</label>
+              <label for="postal_code" class="block font-medium">{{ $t('plz') }}</label>
               <input
                 type="text"
                 name="postal_code"
-                placeholder="PLZ"
+                :placeholder="[[$t('plz')]]"
                 id="postal_code"
                 autocomplete="postal-code"
                 class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
@@ -134,7 +135,7 @@
             :disabled="(agb_accepted === false)"
             :class="{ 'opacity-50': (agb_accepted === false), 'cursor-not-allowed': (agb_accepted === false) }"
             class="text-white block w-full text-center py-2 px-3 border border-gray-300 rounded-md p-1 bg-blue-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
-          >Registrieren</button>
+          >{{ $t('registrieren') }}</button>
         </div>
       </div>
       <div class="mt-6">
@@ -143,14 +144,14 @@
             <div class="w-full border-t border-gray-300"></div>
           </div>
           <div class="relative flex justify-center text-sm">
-            <span class="px-2 bg-white dark:bg-gray-900">Sie haben bereits einen Account?</span>
+            <span class="px-2 bg-white dark:bg-gray-900">{{ $t('already_have_an_account') }}</span>
           </div>
         </div>
         <div class="mt-6">
           <a
             href="./login"
             class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md p-1 dark:bg-gray-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
-          >Zum Login</a>
+          >{{ $t('go_to_login') }}</a>
         </div>
       </div>
     </div>

src/locales/de.json

@@ -1,5 +1,16 @@
 {
 	"register": {
 		"register_now": "Jetzt für den Lauf für Kaya! 2021 registrieren."
-	}
+	},
+	"mittelname": "Mittelname",
+	"nachname": "Nachname",
+	"vorname": "Vorname",
+	"strasse": "Straße",
+	"please_provide_valid_mail": "Bitte geben Sie eine gültige E-Mail Adresse an",
+	"provide_address": "Adresse angeben?",
+	"ort": "Ort",
+	"plz": "PLZ",
+	"registrieren": "Registrieren",
+	"already_have_an_account": "Sie haben bereits einen Account?",
+	"go_to_login": "Zum Login"
 }

src/main.js

@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import { createWebHistory, createWebHashHistory, createRouter } from 'vue-router';
+import { createWebHistory, createRouter } from 'vue-router';
 import App from './App.vue';
 import { createI18n } from 'vue-i18n';
 import 'windi.css';
@@ -11,8 +11,9 @@ const messages = {
 	en: keys_en,
 	de: keys_de
 };
+const browserlocale = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2);
 const i18n = createI18n({
-	locale: 'de',
+	locale: browserlocale,
 	fallbackLocale: 'en',
 	messages
 });
@@ -23,7 +24,6 @@ const Register = import('./components/Register.vue');
 const Profile = import('./components/Profile.vue');
 //
 const router = createRouter({
-	// history: createWebHashHistory(),
 	history: createWebHistory(),
 	routes: [
 		{ path: '/', component: Home },