use vite plugin dir2json to load locales

next-ui/dir2json.d.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Auto generated by vite-plugin-dir2json
+declare module "*i18n?dir2json&ext=.json&1" {
+  const json: {
+  "en": string;
+  "fr": string;
+};
+  export default json;
+}
+
+declare module "*dir2json" {
+  const json: any;
+  export default json;
+}

next-ui/package-lock.json

@@ -42,6 +42,7 @@
         "unplugin-vue-components": "^28.5.0",
         "unplugin-vue-router": "^0.12.0",
         "vite": "^6.3.5",
+        "vite-plugin-dir2json": "^1.3.0",
         "vite-plugin-vue-layouts-next": "^0.1.2",
         "vite-plugin-vuetify": "^2.0.3",
         "vue-router": "^4.4.0",
@@ -6067,6 +6068,16 @@
         }
       }
     },
+    "node_modules/vite-plugin-dir2json": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dir2json/-/vite-plugin-dir2json-1.3.0.tgz",
+      "integrity": "sha512-8pDkva7HApVRW9S3AdlN5clvkfOOBb1rT8CU1zLWn24tVlp79tiuF/yah7+ZFP+d3wpuAAknmpYFvv23xIWKqg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "vite": ">=2.x"
+      }
+    },
     "node_modules/vite-plugin-vue-layouts-next": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/vite-plugin-vue-layouts-next/-/vite-plugin-vue-layouts-next-0.1.2.tgz",

next-ui/package.json

@@ -50,6 +50,7 @@
     "unplugin-vue-components": "^28.5.0",
     "unplugin-vue-router": "^0.12.0",
     "vite": "^6.3.5",
+    "vite-plugin-dir2json": "^1.3.0",
     "vite-plugin-vue-layouts-next": "^0.1.2",
     "vite-plugin-vuetify": "^2.0.3",
     "vue-router": "^4.4.0",

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

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

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

@@ -1,4 +1,5 @@
 import {defineMessage} from 'vue-intl'
+import localeMessages from '../i18n?dir2json&ext=.json&1'
 
 export const defaultLocale = 'en'
 
@@ -13,24 +14,18 @@ const localeName = defineMessage({
  * If the translation file does not exist, loads the `defaultLocale` instead.
  * @param locale the locale code, e.g. 'fr'
  */
-export async function loadLocale(locale: string) {
+export function loadLocale(locale: string) {
   const localeToLoad = locale in availableLocales ? locale : defaultLocale
-  const { default: messages } = await import(`@/i18n/${localeToLoad}.json`);
-  return messages;
+  return (localeMessages as Record<string, unknown>)[localeToLoad];
 }
 
-async function loadAvailableLocales(): Promise<Record<string, string>> {
-  const localeFiles = import.meta.glob('@/i18n/*.json')
-  const locales: Record<string, string> = {}
-  for (const path in localeFiles) {
-    const matched = path.match(/([A-Za-z0-9-_]+)\./i)
-    if (matched && matched.length > 1) {
-      const locale = matched[1]
-      const messages = await localeFiles[path]!() as Record<string, string>
-      locales[locale!] = messages.default![localeName.id]!
-    }
-  }
-  return locales
+
+function loadAvailableLocales(): Record<string, string> {
+  const localesInfo: Record<string, string> = {}
+  Object.keys(localeMessages).forEach(x =>
+    localesInfo[x] = (localeMessages as unknown as Record<string, Record<string, string>>)[x]![localeName.id]!
+  )
+  return localesInfo
 }
 
 /**
@@ -38,7 +33,7 @@ async function loadAvailableLocales(): Promise<Record<string, string>> {
  * Key is the locale code (e.g. 'fr')
  * Value is the locale name in its own locale (e.g. 'Français')
  */
-export const availableLocales = await loadAvailableLocales()
+export const availableLocales = loadAvailableLocales()
 
 /**
  * Gets the saved locale from localStorage.

next-ui/tsconfig.app.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "./dir2json.d.ts"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": false,

next-ui/vite.config.mts

@@ -6,6 +6,7 @@ import Layouts from 'vite-plugin-vue-layouts-next'
 import Vue from '@vitejs/plugin-vue'
 import VueRouter from 'unplugin-vue-router/vite'
 import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import dir2json from "vite-plugin-dir2json";
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -55,6 +56,9 @@ export default defineConfig({
         ],
       },
     }),
+    dir2json({
+      dts: true
+    })
   ],
   define: { 'process.env': {} },
   resolve: {