From 5be17d6c3e58d6e4bf2cec5592a3af537b1ba8d5 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 19 Apr 2022 16:34:53 +0200
Subject: [PATCH] Use i18n

---
 client/package.json                  |  2 ++
 client/src/components/TheWelcome.vue |  2 +-
 client/src/i18n.ts                   | 39 ++++++++++++++++++++++++++++
 client/src/locales/de.json           |  3 +++
 client/src/main.ts                   |  6 +++++
 client/vite.config.ts                | 12 ++++++++-
 6 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 client/src/i18n.ts
 create mode 100644 client/src/locales/de.json

diff --git a/client/package.json b/client/package.json
index 94a328fb..a499ee3d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,9 +14,11 @@
   "dependencies": {
     "pinia": "^2.0.13",
     "vue": "^3.2.31",
+    "vue-i18n": "^9.1.9",
     "vue-router": "^4.0.14"
   },
   "devDependencies": {
+    "@intlify/vite-plugin-vue-i18n": "^3.4.0",
     "@rushstack/eslint-patch": "^1.1.0",
     "@types/jsdom": "^16.2.14",
     "@types/node": "^16.11.26",
diff --git a/client/src/components/TheWelcome.vue b/client/src/components/TheWelcome.vue
index 0a9c3a3b..5039ed66 100644
--- a/client/src/components/TheWelcome.vue
+++ b/client/src/components/TheWelcome.vue
@@ -13,7 +13,7 @@ import SupportIcon from './icons/IconSupport.vue'
       <DocumentationIcon />
     </template>
     <template #heading>Documentation</template>
-
+    <p>{{ $t("test") }}</p>
     Vue’s
     <a class="bg-blue" target="_blank" href="https://vuejs.org/">official documentation</a>
     provides you with all information you need to get started.
diff --git a/client/src/i18n.ts b/client/src/i18n.ts
new file mode 100644
index 00000000..308f5170
--- /dev/null
+++ b/client/src/i18n.ts
@@ -0,0 +1,39 @@
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n/index'
+
+// https://vue-i18n.intlify.dev/guide/advanced/lazy.html
+export const SUPPORT_LOCALES = ['de', 'fr', 'it']
+
+export function setupI18n(options = { locale: 'de' }) {
+  const i18n = createI18n(options)
+  setI18nLanguage(i18n, options.locale)
+  return i18n
+}
+
+export function setI18nLanguage(i18n: any, locale: string) {
+  if (i18n.mode === 'legacy') {
+    i18n.global.locale = locale
+  } else {
+    i18n.global.locale.value = locale
+  }
+  /**
+   * NOTE:
+   * If you need to specify the language setting for headers, such as the `fetch` API, set it here.
+   * The following is an example for axios.
+   *
+   * axios.defaults.headers.common['Accept-Language'] = locale
+   */
+  document.querySelector('html').setAttribute('lang', locale)
+}
+
+export async function loadLocaleMessages(i18n: any, locale: any) {
+  // load locale messages with dynamic import
+  const messages = await import(
+    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
+  )
+
+  // set locale and locale message
+  i18n.global.setLocaleMessage(locale, messages.default)
+
+  return nextTick()
+}
diff --git a/client/src/locales/de.json b/client/src/locales/de.json
new file mode 100644
index 00000000..fe250649
--- /dev/null
+++ b/client/src/locales/de.json
@@ -0,0 +1,3 @@
+{
+  "test": "Hallo VBV"
+}
diff --git a/client/src/main.ts b/client/src/main.ts
index 7a49df42..52412ad1 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -1,14 +1,20 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
+import {setupI18n, loadLocaleMessages} from './i18n'
 import App from './App.vue'
 import router from './router'
 
 import '@/assets/styles/index.scss'
 
+const i18n = setupI18n()
 const app = createApp(App)
 
+// todo: define lang setup
+await loadLocaleMessages(i18n, 'de')
+
 app.use(createPinia())
 app.use(router)
+app.use(i18n)
 
 app.mount('#app')
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 944986b5..da0a1ff2 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -1,11 +1,21 @@
+import path from 'path'
 import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import vueI18n from '@intlify/vite-plugin-vue-i18n'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  alias: {
+    'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
+  },
+  plugins: [
+    vue(),
+    vueI18n({
+      include: path.resolve(__dirname, './locales/**')
+    })
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))