Use i18n

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",

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.

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()
+}

client/src/locales/de.json

@@ -0,0 +1,3 @@
+{
+  "test": "Hallo VBV"
+}

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')

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))