feat: add i18n support to vuetify #194

components/MainMap/NavMenu.vue

@@ -6,7 +6,7 @@ import type { LocaleObject } from 'vue-i18n-routing'
 import { VDivider } from 'vuetify/components/VDivider'
 import { VList, VListItem, VListItemTitle } from 'vuetify/components/VList'
 import { VMenu } from 'vuetify/components/VMenu'
-
+import { useLocale } from 'vuetify'
 import { defineNuxtComponent } from '#app'
 import ExternalLink from '~/components/UI/ExternalLink.vue'
 import IconButton from '~/components/UI/IconButton.vue'
@@ -34,6 +34,14 @@ export default defineNuxtComponent({
     },
   },
 
+  setup() {
+    const { current } = useLocale()
+
+    return {
+      vuetifyLocale: current,
+    }
+  },
+
   computed: {
     ...mapWritableState(siteStore, ['locale']),
 
@@ -46,6 +54,7 @@ export default defineNuxtComponent({
     async setLocale(locale: string) {
       await this.$i18n.setLocale(locale)
       this.locale = locale
+      this.vuetifyLocale = locale
     },
     openLink(title: string, url: string) {
       this.$tracking({

plugins/vuetify.ts

@@ -1,11 +1,17 @@
 import { createVuetify } from 'vuetify'
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
+import { en, es, fr } from 'vuetify/locale'
 import 'vuetify/styles'
 
 import { defineNuxtPlugin } from '#app/nuxt'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const vuetify = createVuetify({
+    locale: {
+      locale: 'en',
+      fallback: 'en',
+      messages: { en, es, fr },
+    },
     icons: {
       defaultSet: 'mdi',
       aliases,