Added multi-language support via i18n

vue/package.json

@@ -15,6 +15,7 @@
         "jquery": "^3.4.1",
         "typescript": "^3.7.3",
         "vue": "^2.6.10",
+        "vue-i18n": "^8.15.3",
         "vue-masonry": "^0.11.8",
         "vue-resource": "^1.5.1",
         "vue-router": "^3.1.3",

vue/src/lang/index.js

@@ -0,0 +1,12 @@
+import de from './translations/de';
+import en from './translations/en';
+
+export default {
+  'de':de,'de-DE':de,'de-AT':de,'de-CH':de,
+  'en':en,'en-US':en,'en-GB':en
+};
+
+export const i18n_LANGUAGES = [
+  'de','de-DE','de-AT','de-CH',
+  'en','en-US','en-GB'
+]

vue/src/lang/translations/de.json

@@ -0,0 +1,13 @@
+{
+    "about":{
+        "message":"Das ist eine About Seite"
+    },
+    "profile":{
+        "email":"E-Mail",
+        "username":"Nutzername",
+        "password":"Passwort"
+    },
+
+
+    "HelloWorld": "Hallo Welt!"
+}

vue/src/lang/translations/en.json

@@ -0,0 +1,13 @@
+{
+    "about":{
+        "message":"This is an About page"
+    },
+    "profile":{
+        "email":"E-Mail",
+        "username":"Username",
+        "password":"Password"
+    },
+
+
+    "HelloWorld": "Hello World!"
+}

vue/src/main.js

@@ -3,6 +3,17 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 
+//import i18n
+import VueI18n from 'vue-i18n';
+import messages from './lang';
+
+Vue.use(VueI18n);
+export const i18n = new VueI18n({
+  locale: 'en',
+  fallbacklocale: 'en',
+  messages
+});
+
 // import Font Awesome icons
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -23,5 +34,6 @@ Vue.config.productionTip = false;
 new Vue({
   router,
   store,
-  render: h => h(App)
+  i18n,
+  render: h => h(App),
 }).$mount('#app');

vue/src/router/index.js

@@ -1,21 +1,49 @@
 import Vue from 'vue';
-import VueRouter from 'vue-router';
-import Home from '../views/Home.vue';
-Vue.use(VueRouter);
+import Router from 'vue-router';
 
-const routes = [{
-  path: '/',
-  name: 'noticeBoard',
-  // route level code-splitting
-  // this generates a separate chunk (about.[hash].js) for this route
-  // which is lazy-loaded when the route is visited.
-  component: () =>
-    import ('../views/NoticeBoard.vue')
-}
-];
+import RouterView from '@/views/RouterView.vue';
+import { i18n } from '@/main.js';
+import { i18n_LANGUAGES } from '@/lang/index.js';
 
-const router = new VueRouter({
-  routes
-});
+Vue.use(Router);
+
+export default new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [{
+    path: '/',
+    component: RouterView, // Empty router object. Do not delete.
+    beforeEnter(to,from,next){
+      // Retrieve browser locale
+      var lang = window.navigator.userLanguage || window.navigator.language;
+      // Check if browser locale is supported. Change to 'en-GB' if not.
+      if(!i18n_LANGUAGES.includes(lang)) { i18n.locale = 'en-GB'; }
+      else {
+        if (i18n.locale !== lang) { i18n.locale = lang; }
+      }
+      //alert('lang: ' + lang + '  i18n: ' + i18n.locale);
+      return next();
+    },
 
-export default router;
+    children: [
+      {
+        path: 'about',
+        name: 'About',
+        component: () => import ('../views/About.vue')
+      },
+      {
+        path: 'home',
+        name: 'Home',
+        component: () => import ('../views/NoticeBoard.vue')
+      }
+    ]
+
+  },
+  // Redirect to 404 page if trying to visit invalid path
+  {
+    path: '*',    
+    //redirect: '/home'
+    component: () => import ('../views/404.vue')
+  }
+  ]
+});

vue/src/views/404.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="p404">
+    <img
+      alt="404Img"
+      src="../assets/404.jpg"
+      align="center"
+      height="100%"
+    >
+    <h1><b>This is not the Page you are looking for...</b></h1>
+  </div>
+</template>;
+
+<style>
+  .p404{
+    padding: 20px;
+  }
+</style>

vue/src/views/About.vue

@@ -1,5 +1,5 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1>{{ $t('about.message') }}</h1>
   </div>
 </template>;

vue/src/views/RouterView.vue

@@ -0,0 +1,4 @@
+<!-- Empty Router object. Do not delete. -->
+<template>
+  <router-view />
+</template>