added locale

src/App.vue

@@ -1,10 +1,12 @@
 <script lang="ts"  >
 import {RouterView} from 'vue-router';
 import {Options, Vue} from 'vue-class-component';
+import DocumentLocaleSetter from '@/components/locale/DocumentLocaleSetter.vue';
 
 @Options({
   name: 'App',
   components: {
+    DocumentLocaleSetter,
     RouterView,
   },
 })
@@ -14,5 +16,6 @@ export default class App extends Vue {
 </script>
 
 <template>
+  <DocumentLocaleSetter/>
   <RouterView/>
 </template>

src/components/locale/DocumentLocaleSetter.vue

@@ -0,0 +1,20 @@
+<script lang="ts">
+import {Vue, Options} from 'vue-class-component';
+import {setDocumentLocale} from '@/locale/locale';
+import {Watch} from 'vue-property-decorator';
+
+@Options({name: 'DocumentLocaleSetter'})
+export default class DocumentLocaleSetter extends Vue {
+  mounted(): void {
+    this.onLocaleChanged(this.$i18n.locale);
+  }
+
+  @Watch('$i18n.locale')
+  onLocaleChanged(value: string): void {
+    setDocumentLocale(value);
+  }
+}
+</script>
+
+<template>
+</template>

src/locale/de.ts

@@ -0,0 +1,24 @@
+export const messagesDe = {};
+
+export const datetimeFormatsDe = {
+  date: {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+  },
+  datetime: {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  },
+  datetimeSeconds: {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    seconds: 'numeric',
+  },
+};

src/locale/en.ts

@@ -0,0 +1,24 @@
+export const messagesEn = {};
+
+export const datetimeFormatsEn = {
+  date: {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+  },
+  datetime: {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  },
+  datetimeSeconds: {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    seconds: 'numeric',
+  },
+};

src/locale/locale.ts

@@ -0,0 +1,28 @@
+import type {I18n} from 'vue-i18n';
+import {createI18n as vueCreateI18n} from 'vue-i18n';
+import {messagesEn, datetimeFormatsEn} from '@/locale/en';
+import {messagesDe, datetimeFormatsDe} from '@/locale/de';
+
+const messages = {
+  en: messagesEn,
+  de: messagesDe,
+}
+
+const datetimeFormats = {
+  en: datetimeFormatsEn,
+  de: datetimeFormatsDe,
+}
+
+export function createI18n(): I18n {
+  return vueCreateI18n({
+    locale: 'de',
+    fallbackLocale: 'en',
+    messages: messages,
+    datetimeFormats: datetimeFormats,
+    legacy: true,
+  });
+}
+
+export function setDocumentLocale(locale: string): void {
+  document.documentElement.setAttribute("lang", locale);
+}

src/main.ts

@@ -4,9 +4,12 @@ import {createPinia} from 'pinia';
 import App from './App.vue';
 import router from './router';
 
+import {createI18n} from '@/locale/locale';
+
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
+app.use(createI18n());
 
 app.mount('#app');