add i18n

vue/app.vue

@@ -1,5 +1,13 @@
 
 <template>
-  HELLO
+  <LanguageSwitcher />
+  {{ t('app.hello') }}
   <RouterView />
-</template>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
+
+const { t } = useI18n()
+</script>

vue/components/LanguageSwitcher.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="dropdown">
+    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
+      {{ locale.toUpperCase() }}
+    </button>
+    <ul class="dropdown-menu">
+      <li v-for="loc in SUPPORT_LOCALES" :key="loc">
+        <a class="dropdown-item" href="#" @click.prevent="setLocale(loc)">{{ loc.toUpperCase() }}</a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { setLocale, SUPPORT_LOCALES } from '@/i18n.js'
+
+const { locale } = useI18n()
+</script>

vue/i18n.js

@@ -0,0 +1,33 @@
+import { createI18n } from 'vue-i18n'
+
+export const SUPPORT_LOCALES = ['en', 'sl']
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: {},
+})
+
+const loadedLocales = new Set()
+
+async function loadLocaleMessages(locale) {
+  if (!loadedLocales.has(locale)) {
+    const messages = await import(`../locales/${locale}.json`)
+    i18n.global.setLocaleMessage(locale, messages.default)
+    loadedLocales.add(locale)
+  }
+}
+
+export async function setLocale(locale) {
+  await loadLocaleMessages(locale)
+  i18n.global.locale.value = locale
+  document.documentElement.setAttribute('lang', locale)
+  localStorage.setItem('locale', locale)
+}
+
+export function initialLocale() {
+  const saved = localStorage.getItem('locale')
+  const browser = navigator.language.split('-')[0]
+  return [saved, browser].find(l => SUPPORT_LOCALES.includes(l)) || 'en'
+}

vue/locales/en.json

@@ -0,0 +1,16 @@
+{
+  "common": {
+    "save": "Save",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "edit": "Edit",
+    "close": "Close",
+    "confirm": "Confirm",
+    "search": "Search",
+    "loading": "Loading..."
+  },
+  "app": {
+    "hello": "HELLO",
+    "world": "WORLD"
+  }
+}

vue/locales/sl.json

@@ -0,0 +1,16 @@
+{
+  "common": {
+    "save": "Shrani",
+    "cancel": "Prekliči",
+    "delete": "Izbriši",
+    "edit": "Uredi",
+    "close": "Zapri",
+    "confirm": "Potrdi",
+    "search": "Iskanje",
+    "loading": "Nalaganje..."
+  },
+  "app": {
+    "hello": "ZDRAVO",
+    "world": "SVET"
+  }
+}

vue/main.js

@@ -1,13 +1,18 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { routes, handleHotUpdate } from 'vue-router/auto-routes'
-import App from './app.vue'
+import { i18n, setLocale, initialLocale } from './i18n.js'
 
 import '@fortawesome/fontawesome-free/css/all.min.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap/dist/js/bootstrap.bundle.min.js'
 import 'vue-multiselect/dist/vue-multiselect.css';
 
+
+import App from './app.vue'
+
+await setLocale(initialLocale())
+
 const router = createRouter({
   history: createWebHashHistory(),
   routes,
@@ -17,5 +22,5 @@ if (import.meta.hot) {
   handleHotUpdate(router)
 }
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(router).use(i18n).mount('#app')
 

vue/routes/index.vue

@@ -1,3 +1,9 @@
 <template>
-  WORLD
-</template>
+  {{ t('app.world') }}
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>

vue/routes/test.vue

@@ -1,3 +1,8 @@
 <template>
-  TEST
-</template>
+  {{ t('common.save') }}
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+</script>