feat: configurable vue app root container selector

Author: BobbieGoede

packages/unplugin-vue-i18n/README.md

@@ -616,6 +616,13 @@ If do you will use this option, you need to enable `jitCompilation` option.
 
   > [!IMPORTANT] > Vite support only
 
+### `appRootContainer`
+
+- **Type:** `string`
+- **Default:** `'#app'`
+
+  The selector used find the Vue app root container during HMR.
+
 ### `useVueI18nImportName` (Experimental)
 
 - **Type:** `boolean`

packages/unplugin-vue-i18n/src/core/options.ts

@@ -58,6 +58,7 @@ export function resolveOptions(options: PluginOptions) {
 
   const allowDynamic = !!options.allowDynamic
   const hmr = !!options.hmr
+  const appRootContainer = options.appRootContainer ?? '#app'
 
   const strictMessage = isBoolean(options.strictMessage)
     ? options.strictMessage
@@ -85,6 +86,7 @@ export function resolveOptions(options: PluginOptions) {
     include,
     exclude,
     hmr,
+    appRootContainer,
     module: moduleType,
     onlyLocales,
     forceStringify,

packages/unplugin-vue-i18n/src/core/resource.ts

@@ -51,6 +51,7 @@ export function resourcePlugin(
     exclude,
     module,
     forceStringify,
+    appRootContainer,
     defaultSFCLang,
     globalSFCScope,
     runtimeOnly,
@@ -231,6 +232,16 @@ export function resourcePlugin(
           }
         }
       },
+      configureServer(server) {
+        // client could not find vue app root during HMR
+        server.ws.on('unplugin-vue-i18n:app-root-missing', _ => {
+          console.error(
+            `[unplugin-vue-i18n] Unable to find vue-i18n instance on vue app root container with selector "${appRootContainer}" - skipping HMR and reloading page.\n` +
+              `The selector used can be configured using the \`appRootcontainer\` option.`
+          )
+          server.ws.send({ type: 'full-reload' })
+        })
+      },
 
       async handleHotUpdate({ file, server }) {
         if (/\.(json5?|ya?ml)$/.test(file)) {
@@ -328,7 +339,8 @@ export function resourcePlugin(
             forceStringify,
             strictMessage,
             escapeHtml,
-            hmr
+            hmr,
+            appRootContainer
           }
         )
         // TODO: support virtual import identifier
@@ -529,6 +541,7 @@ async function generateBundleResources(
     escapeHtml = false,
     jit = true,
     hmr = false,
+    appRootContainer,
     transformI18nBlock = undefined
   }: {
     forceStringify?: boolean
@@ -538,6 +551,7 @@ async function generateBundleResources(
     escapeHtml?: boolean
     jit?: boolean
     hmr?: boolean
+    appRootContainer: string
     transformI18nBlock?: PluginOptions['transformI18nBlock']
   }
 ) {
@@ -582,7 +596,11 @@ if(import.meta.hot) {
 
   import.meta.hot.accept(mod => {
     // retrieve global i18n instance
-    const i18n = document.querySelector('#app').__vue_app__.__VUE_I18N__.global
+    const i18n = document.querySelector('${appRootContainer}')?.__vue_app__?.__VUE_I18N__?.global
+    if(i18n == null) {
+      import.meta.hot.send('unplugin-vue-i18n:app-root-missing', {})
+      return
+    }
 
     // locale keys of both original and updated merged messages
     const localeKeys = uniqueKeys(merged, mod.default)

packages/unplugin-vue-i18n/src/types.ts

@@ -11,6 +11,7 @@ export interface PluginOptions {
   compositionOnly?: boolean
   ssr?: boolean
   hmr?: boolean
+  appRootContainer?: string
   fullInstall?: boolean
   forceStringify?: boolean
   defaultSFCLang?: SFCLangFormat