load vuetify locale

next-ui/dir2json.d.ts

@@ -14,4 +14,4 @@ declare module "*i18n?dir2json&ext=.json&1" {
 declare module "*dir2json" {
   const json: any;
   export default json;
-}
+}

next-ui/src/components/forms/user/FormUserEdit.vue

@@ -5,15 +5,15 @@
       autofocus
       :rules="[rules.required(), rules.email()]"
       :label="$formatMessage({
-        description: 'User creationd ialog: Email field',
+        description: 'User creation dialog: Email field',
         defaultMessage: 'Email',
-        id: 'b5wVJa'
+        id: 'ToD0+o'
       })"
       prepend-icon="mdi-account"
     />
     <v-text-field
       v-model="user.password"
-      class="mt-1"
+      class="mt-1 mb-2"
       :rules="[rules.required()]"
       :label="$formatMessage({
         description: 'User creation dialog: Password field',

next-ui/src/plugins/vue-intl.ts

@@ -1,5 +1,5 @@
 import {createIntl} from 'vue-intl'
-import {currentLocale, defaultLocale, loadLocale} from '@/utils/locale-helper.ts'
+import {currentLocale, defaultLocale, loadLocale} from '@/utils/locale-helper'
 
 const messages = loadLocale(currentLocale)
 

next-ui/src/plugins/vuetify.ts

@@ -16,8 +16,28 @@ import {md3} from 'vuetify/blueprints'
 import {VIconBtn} from 'vuetify/labs/components'
 import {createRulesPlugin} from 'vuetify/labs/rules'
 
+
+import {availableLocales, currentLocale, defaultLocale} from '@/utils/locale-helper'
+
+// load vuetify locales only for the available locales in i18n
+async function loadVuetifyLocale(locale: string) {
+  return await import(`../../node_modules/vuetify/lib/locale/${locale}.js`)
+}
+
+const messages: Record<string, string> = {};
+void (async()=>{
+for (const locale of Object.keys(availableLocales)) {
+  messages[locale] = (await loadVuetifyLocale(locale)).default
+}
+})();
+
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export const vuetify = createVuetify({
+  locale: {
+    locale: currentLocale,
+    fallback: defaultLocale,
+    messages,
+  },
   theme: {
     defaultTheme: 'light',
     themes: {

next-ui/src/utils/locale-helper.ts

@@ -14,9 +14,9 @@ const localeName = defineMessage({
  * If the translation file does not exist, loads the `defaultLocale` instead.
  * @param locale the locale code, e.g. 'fr'
  */
-export function loadLocale(locale: string) {
+export function loadLocale(locale: string): Record<string, string> {
   const localeToLoad = locale in availableLocales ? locale : defaultLocale
-  return (localeMessages as Record<string, unknown>)[localeToLoad];
+  return (localeMessages as unknown as Record<string, Record<string, string>>)[localeToLoad]!;
 }
 
 

next-ui/tsconfig.app.json

@@ -6,9 +6,9 @@
     "composite": false,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "moduleResolution": "bundler",
     "noUncheckedIndexedAccess": true, // openapi-ts
-
+    "allowImportingTsExtensions":true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]

next-ui/tsconfig.node.json

@@ -12,7 +12,8 @@
     "noEmit": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "types": ["node"]
   }
 }