added i18n

package.json

@@ -39,10 +39,11 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "typescript-json-serializer": "^6.0.1",
-    "vue": "^3.4.21",
+    "vue-i18n": "^9.9.1",
     "vue-maplibre-gl": "^3.1.3",
     "vue-router": "^4.3.0",
     "vue-slider-component": "^4.1.0-beta.7",
+    "vue": "^3.4.21",
     "vuetify": "^3.5.9"
   },
   "devDependencies": {

src/components/user-settings/UserSettingsMenu.vue

@@ -52,7 +52,7 @@
       <v-divider />
       <UserSettingsDialog>
         <template #activator="{ props }">
-          <v-list-item v-bind="props">All Settings ...</v-list-item>
+          <v-list-item v-bind="props" v-t="'settings.all'"> </v-list-item>
         </template>
       </UserSettingsDialog>
     </v-list>

src/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "settings": {
+    "all": "All settings ..."
+  }
+}

src/locales/index.ts

@@ -0,0 +1,18 @@
+import { en, nl } from 'vuetify/locale'
+import enCustom from './en.json'
+import nlCustom from './nl.json'
+
+export const messages = {
+  en: {
+    $vuetify: {
+      ...en,
+    },
+    ...enCustom,
+  },
+  nl: {
+    $vuetify: {
+      ...nl,
+    },
+    ...nlCustom,
+  },
+}

src/locales/nl.json

@@ -0,0 +1,5 @@
+{
+  "settings": {
+    "all": "Alle instellingen ..."
+  }
+}

src/main.ts

@@ -8,6 +8,7 @@ import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import { defineCustomElements } from '@deltares/fews-ssd-webcomponent/loader'
 import 'maplibre-gl/dist/maplibre-gl.css'
+import { i18n } from './plugins/i18n'
 
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
@@ -19,6 +20,7 @@ app.config.compilerOptions.isCustomElement = (tag) =>
   tag === 'schematic-status-display'
 
 app.use(pinia)
+app.use(i18n)
 app.use(vuetify)
 
 fetch(`${import.meta.env.BASE_URL}app-config.json`)

src/plugins/i18n.ts

@@ -0,0 +1,10 @@
+import { createI18n } from 'vue-i18n'
+import { messages } from '../locales/index.js'
+
+export const i18n = createI18n<false>({
+  legacy: false,
+  locale: import.meta.env.VITE_I18N_LOCALE || 'en',
+  fallbackLocale: import.meta.env.VITE_I18N_FALLBACK_LOCALE || 'en',
+  messages,
+  globalInjection: true,
+})

src/plugins/vuetify.ts

@@ -4,10 +4,16 @@ import '@mdi/font/css/materialdesignicons.css'
 import { createVuetify } from 'vuetify'
 import * as directives from 'vuetify/directives'
 import * as components from 'vuetify/components'
+import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
+import { i18n } from './i18n'
+import { useI18n } from 'vue-i18n'
 
 const vuetify = createVuetify({
   components,
   directives,
+  locale: {
+    adapter: createVueI18nAdapter({ i18n, useI18n }),
+  },
 })
 
 export default vuetify

vite.config.ts

@@ -15,6 +15,8 @@ export default defineConfig(({ mode }) => {
       __GIT_HASH__: JSON.stringify(commitHash),
       __GIT_TAG__: JSON.stringify(commitTag),
       __BUILD_DATE__: JSON.stringify(buildDate),
+      __INTLIFY_JIT_COMPILATION__: JSON.stringify(true), // needed to enable JIT compilation and avoid CSP issues
+      __INTLIFY_DROP_MESSAGE_COMPILER__: JSON.stringify(true), // needed to enable JIT compilation and avoid CSP issues
     },
     server: {
       headers: {