Apply locale

Author: JanisV

frontend/src/App.vue

@@ -1,9 +1,10 @@
 <script setup>
 import {onMounted, ref} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
-import {useTheme} from 'vuetify'
+import {useLocale, useTheme} from 'vuetify'
 import {useSQLite} from "@/composables/useSQLite.js";
 import {useThemeStore} from '@/stores/theme'
+import {useLocaleStore} from '@/stores/locale'
 import FileUploaderView from '@/components/FileUploaderView.vue'
 import CoinListView from "@/components/CoinListView.vue";
 import SettingsView from "@/components/SettingsView.vue";
@@ -29,9 +30,12 @@ const route = useRoute()
 
 const themeStore = useThemeStore()
 const theme = useTheme()
+const localeStore = useLocaleStore()
+const appLocale = useLocale()
 
 onMounted(async () => {
   theme.change(themeStore.currentTheme)
+  appLocale.current.value = localeStore.currentLocale
 
   await router.replace('/')
 })

frontend/src/components/SettingsView.vue

@@ -1,12 +1,13 @@
 <script setup>
 import {onMounted, onUnmounted, ref} from "vue";
-import { useTheme } from 'vuetify'
+import { useLocale, useTheme } from 'vuetify'
 import { useLocaleStore } from '@/stores/locale'
 import { useThemeStore } from '@/stores/theme'
 
 const themeStore = useThemeStore()
-const localeStore = useLocaleStore()
 const appTheme = useTheme()
+const localeStore = useLocaleStore()
+const appLocale = useLocale()
 
 const langs = ref([
   {lang: 'bg', name: 'Български'},
@@ -40,6 +41,11 @@ onUnmounted(async () => {
   emit('update:title', oldTitle);
 })
 
+const handleLocaleChange = (locale) => {
+  localeStore.setLocale(locale)
+  appLocale.current.value = locale
+}
+
 const handleThemeChange = (theme) => {
   themeStore.setTheme(theme)
   appTheme.change(theme)
@@ -67,6 +73,7 @@ const handleThemeChange = (theme) => {
             :items="langs"
             item-title="name"
             item-value="lang"
+            @update:model-value="handleLocaleChange"
         ></v-select>
       </v-list-item>
     </v-list>

frontend/src/main.js

@@ -12,6 +12,7 @@ import * as directives from 'vuetify/directives'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import colors from 'vuetify/util/colors'
 import { md3 } from 'vuetify/blueprints'
+import { bg, ca, de, el, es, fa, fr, it, nl, pl, pt, ru, tr, uk, } from 'vuetify/locale'
 
 // Components
 import App from './App.vue'
@@ -24,6 +25,10 @@ const vuetify = createVuetify({
   components,
   directives,
   blueprint: md3,
+  locale: {
+    locale: 'en',
+    messages: { bg, ca, de, el, es, fa, fr, it, nl, pl, pt, ru, tr, uk, },
+  },
   theme: {
     defaultTheme: 'dark',
     themes: {