fix & improvements

Author: larbish

src/app/src/i18n.ts

@@ -1,13 +1,11 @@
 import { createI18n, type LocaleMessages, type VueMessageType } from 'vue-i18n'
 
-const defaultLocale = navigator.language.split('-')[0] || 'en'
-
 type StudioMessages = Record<string, LocaleMessages<VueMessageType>>
 
-export function createStudioI18n(messages: Record<string, unknown>) {
+export function createStudioI18n(locale: string, messages: Record<string, unknown>) {
   return createI18n({
     legacy: false,
-    locale: defaultLocale,
+    locale,
     fallbackLocale: 'en',
     messages: messages as StudioMessages,
     globalInjection: true, // to be able to use $t() in templates

src/app/src/main.ts

@@ -1,21 +1,18 @@
 import type { VueElementConstructor } from 'vue'
 import { defineCustomElement } from 'vue'
 import { createRouter, createMemoryHistory } from 'vue-router'
-
 // @ts-expect-error -- inline css
 import styles from './assets/css/main.css?inline'
-
 import { createHead } from '@unhead/vue/client'
 import { generateColors, tailwindColors } from './utils/colors'
 import { refineTailwindStyles } from './utils/styles.ts'
-
+import { createStudioI18n } from './i18n'
 import App from './app.vue'
 import Content from './pages/content.vue'
 import Media from './pages/media.vue'
 import Review from './pages/review.vue'
 import Success from './pages/success.vue'
 import Error from './pages/error.vue'
-import { createStudioI18n } from './i18n'
 
 if (typeof window !== 'undefined' && 'customElements' in window) {
   const NuxtStudio = defineCustomElement(
@@ -56,13 +53,12 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
         })
 
         app.use(router)
-        // Read messages from window (set by our new Nuxt plugin)
-        // @ts-expect-error - We are defining this global variable
-        const messages = window.__NUXT_STUDIO_I18N_MESSAGES__ || {}
-        // Create the i18n instance dynamically
-        const i18n = createStudioI18n(messages)
-        app.use(i18n) // Use the new instance
-        // app._context.provides.usehead = true
+
+        // @ts-expect-error - Global variable defined in plugin
+        const i18n = createStudioI18n(window.__NUXT_STUDIO_DEFAULT_LOCALE__, window.__NUXT_STUDIO_I18N_MESSAGES__)
+
+        app.use(i18n)
+
         app.use({
           install() {
             const head = createHead({

src/module/src/i18n.ts

@@ -0,0 +1,72 @@
+import { addPlugin, addTemplate, createResolver } from '@nuxt/kit'
+import { resolve, basename, join } from 'node:path'
+import { promises as fsp } from 'node:fs'
+import { defu } from 'defu'
+import type { Nuxt } from '@nuxt/schema'
+
+const resolver = createResolver(import.meta.url)
+
+interface I18nOptions {
+  defaultLocale?: string
+  translations?: Record<string, unknown>
+}
+
+async function loadLocaleFiles(localesPath: string): Promise<Record<string, unknown>> {
+  const messages: Record<string, unknown> = {}
+
+  try {
+    const files = await fsp.readdir(localesPath)
+    const jsonFiles = files.filter(file => file.endsWith('.json'))
+
+    for (const file of jsonFiles) {
+      const lang = basename(file, '.json')
+      const filePath = join(localesPath, file)
+      const content = await fsp.readFile(filePath, 'utf-8')
+      messages[lang] = JSON.parse(content)
+    }
+  }
+  catch {
+    // Directory doesn't exist or can't be read
+  }
+
+  return messages
+}
+
+export async function setupI18n(
+  nuxt: Nuxt,
+  options: I18nOptions,
+) {
+  // Load default locale files from the module
+  const defaultLocalesPath = resolver.resolve('./locales')
+  const defaultMessages = await loadLocaleFiles(defaultLocalesPath)
+
+  // Load user locale files from project
+  const userLocalesPath = resolve(nuxt.options.srcDir, 'locales/studio')
+  const userMessages = await loadLocaleFiles(userLocalesPath)
+
+  const optionsMessages = options.translations || {}
+  // @ts-expect-error - nuxt.options.appConfig.studio is not fully typed
+  const appConfigMessages = nuxt.options.appConfig.studio?.i18n?.translations || {}
+
+  const defaultLocale = options.defaultLocale || 'en'
+  const finalMessages = defu(
+    optionsMessages, // 1. Highest priority (nuxt.config options)
+    appConfigMessages, // 2. Priority (app.config)
+    userMessages, // 3. Priority (locales/studio user folder)
+    defaultMessages, // 4. Default translations (module)
+  )
+
+  addTemplate({
+    filename: 'studio-i18n-plugin.client.mjs',
+    getContents: () => {
+      return `
+        export default defineNuxtPlugin(() => {
+          window.__NUXT_STUDIO_I18N_MESSAGES__ = ${JSON.stringify(finalMessages)}
+          window.__NUXT_STUDIO_DEFAULT_LOCALE__ = '${defaultLocale}'
+        })
+      `
+    },
+  })
+
+  addPlugin(resolve(nuxt.options.buildDir, 'studio-i18n-plugin.client.mjs'))
+}

src/app/src/locales/en.json renamed to src/module/src/locales/en.json

@@ -1,15 +1,13 @@
-import { defineNuxtModule, createResolver, addPlugin, extendViteConfig, useLogger, addServerHandler, addTemplate, addVitePlugin } from '@nuxt/kit'
+import { defineNuxtModule, createResolver, addPlugin, extendViteConfig, useLogger, addServerHandler, addTemplate } from '@nuxt/kit'
 import { createHash } from 'node:crypto'
 import { defu } from 'defu'
-import { resolve, basename } from 'node:path'
-import { promises as fsp } from 'node:fs'
-import { globby } from 'globby'
+import { resolve } from 'node:path'
 import fsDriver from 'unstorage/drivers/fs'
 import { createStorage } from 'unstorage'
-import type { Plugin } from 'vite'
 import { getAssetsStorageDevTemplate, getAssetsStorageTemplate } from './templates'
 import { version } from '../../../package.json'
 import { setupDevMode } from './dev'
+import { setupI18n } from './i18n'
 
 interface ModuleOptions {
   /**
@@ -135,71 +133,6 @@ export default defineNuxtModule<ModuleOptions>({
     const resolver = createResolver(import.meta.url)
     const runtime = (...args: string[]) => resolver.resolve('./runtime', ...args)
 
-    const defaultLocalesPath = resolver.resolve('../../app/src/locales')
-    const defaultLocaleFiles = await globby(`${defaultLocalesPath}/*.json`)
-    const defaultMessages: Record<string, unknown> = {}
-    for (const file of defaultLocaleFiles) {
-      const lang = basename(file, '.json')
-      defaultMessages[lang] = JSON.parse(await fsp.readFile(file, 'utf-8'))
-    }
-
-    const userLocalesPath = resolve(nuxt.options.srcDir, 'locales/studio')
-    const userLocaleFiles = await globby(`${userLocalesPath}/*.json`)
-    const userMessages: Record<string, unknown> = {}
-    for (const file of userLocaleFiles) {
-      const lang = basename(file, '.json')
-      userMessages[lang] = JSON.parse(await fsp.readFile(file, 'utf-8'))
-    }
-
-    const optionsMessages = options.i18n?.translations || {}
-    // @ts-expect-error - nuxt.options.appConfig.studio is not fully typed
-    const appConfigMessages = nuxt.options.appConfig.studio?.i18n?.translations || {}
-
-    const finalMessages = defu(
-      optionsMessages, // 1. Highest priority (nuxt.config options)
-      appConfigMessages, // 2. Priority (app.config)
-      userMessages, // 3. Priority (locales/studio folder)
-      defaultMessages, // 4. Default translations (module)
-    )
-
-    // --- VITE PLUGIN ---
-    const virtualModuleName = 'virtual:studio-i18n-messages'
-    const resolvedVirtualModuleId = '\0' + virtualModuleName
-
-    addVitePlugin({
-      name: 'nuxt-studio-i18n-virtual-module',
-      resolveId(id) {
-        if (id === virtualModuleName) {
-          return resolvedVirtualModuleId
-        }
-      },
-      load(id) {
-        if (id === resolvedVirtualModuleId) {
-          return `export default ${JSON.stringify(finalMessages)}`
-        }
-      },
-    } as Plugin)
-
-    addTemplate({
-      filename: 'studio-i18n-plugin.client.mjs',
-      getContents: () => {
-        const defaultLocale = options.i18n?.defaultLocale || 'en'
-
-        return `
-        import messages from 'virtual:studio-i18n-messages'
-
-        export default defineNuxtPlugin(() => {
-          // @ts-ignore
-          window.__NUXT_STUDIO_I18N_MESSAGES__ = messages
-          // @ts-ignore
-          window.__NUXT_STUDIO_DEFAULT_LOCALE__ = '${defaultLocale}'
-        })
-      `
-      },
-    })
-
-    addPlugin(resolve(nuxt.options.buildDir, 'studio-i18n-plugin.client.mjs'))
-
     if (nuxt.options.dev === false || options.development?.sync === false) {
       options.dev = false
     }
@@ -279,6 +212,8 @@ export default defineNuxtModule<ModuleOptions>({
         : getAssetsStorageTemplate(assetsStorage, nuxt),
     })
 
+    await setupI18n(nuxt, options.i18n!)
+
     if (options.dev) {
       setupDevMode(nuxt, runtime, assetsStorage)
     }