POC for translations

frontend/package.json

@@ -37,6 +37,7 @@
 		"swissgrid": "^1.0.5",
 		"tiptap-extension-resize-image": "^1.0.2",
 		"vue": "^3.2.31",
+		"vue-i18n": "^9.9.1",
 		"vue-router": "^4.2.5",
 		"vuex": "^4.1.0"
 	},

frontend/src/main.js

@@ -5,6 +5,8 @@ import store from "./store";
 import { mixin } from "./mixins.js";
 import "./assets/tailwind.css";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { messages } from './translations.js';
+import { createI18n } from 'vue-i18n';
 
 router.beforeEach((to, from, next) => {
 	let splitPath = to.path.split("/");
@@ -16,9 +18,16 @@ router.beforeEach((to, from, next) => {
 	}
 });
 
+const i18n = createI18n({
+	locale: window.navigator.language,
+	fallbackLocale: 'de',
+	messages,
+});
+
 const app = createApp(App)
 	.use(store)
 	.use(router)
+	.use(i18n)
 	.mixin(mixin)
 	.component("font-awesome-icon", FontAwesomeIcon);
 app.directive("router-link", {

frontend/src/translations.js

@@ -0,0 +1,7 @@
+export const messages = {
+  de: {
+    dashboard: {
+      hello: 'Hallo {name}!'
+    }
+  },
+};

frontend/src/views/Dashboard/DashboardHome.vue

@@ -1,6 +1,6 @@
 <template>
 	<Card v-if="user" class="text-4xl font-extrabold"
-		>Hello, {{ user.nickname }}!</Card
+		>{{ $t('dashboard.hello', { name: user.nickname }) }}</Card
 	>
 </template>