test: confirm runtime config can be used in vue i18n config file

specs/basic_usage.spec.ts

@@ -74,6 +74,12 @@ test('register module hook', async () => {
   expect(await getText(page, '#register-module')).toEqual('This is a merged module layer locale key in French')
 })
 
+test('vueI18n config file can access runtimeConfig', async () => {
+  const { page } = await renderPage('/')
+
+  expect(await getText(page, '#runtime-config')).toEqual('Hello from runtime config!')
+})
+
 test('layer provides locale `nl` and translation for key `hello`', async () => {
   const { page } = await renderPage('/layer-page')
 

specs/fixtures/basic_usage/config/i18n.config.ts

@@ -1,33 +1,38 @@
-export default defineI18nConfig(() => ({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    fr: {
-      welcome: 'Bienvenue',
-      home: 'Accueil',
-      profile: 'Profil',
-      aboutSite: 'À propos de ce site',
-      snakeCaseText: "@.snakeCase:{'aboutSite'}",
-      pascalCaseText: "@.pascalCase:{'aboutSite'}",
-      hello: 'Bonjour le monde!',
-      modifier: "@.snakeCase:{'hello'}"
+export default defineI18nConfig(() => {
+  const config = useRuntimeConfig()
+
+  return {
+    legacy: false,
+    locale: 'en',
+    messages: {
+      fr: {
+        welcome: 'Bienvenue',
+        home: 'Accueil',
+        profile: 'Profil',
+        aboutSite: 'À propos de ce site',
+        snakeCaseText: "@.snakeCase:{'aboutSite'}",
+        pascalCaseText: "@.pascalCase:{'aboutSite'}",
+        hello: 'Bonjour le monde!',
+        modifier: "@.snakeCase:{'hello'}"
+      },
+      en: {
+        welcome: 'Welcome',
+        home: 'Homepage',
+        profile: 'Profile',
+        hello: 'Hello world!',
+        modifier: "@.snakeCase:{'hello'}",
+        fallbackMessage: 'This is the fallback message!',
+        runtimeKey: config.public.runtimeValue
+      },
+      nl: {
+        aboutSite: 'Over deze site',
+        snakeCaseText: "@.snakeCase:{'aboutSite'}",
+        pascalCaseText: "@.pascalCase:{'aboutSite'}"
+      }
     },
-    en: {
-      welcome: 'Welcome',
-      home: 'Homepage',
-      profile: 'Profile',
-      hello: 'Hello world!',
-      modifier: "@.snakeCase:{'hello'}",
-      fallbackMessage: 'This is the fallback message!'
-    },
-    nl: {
-      aboutSite: 'Over deze site',
-      snakeCaseText: "@.snakeCase:{'aboutSite'}",
-      pascalCaseText: "@.pascalCase:{'aboutSite'}"
+    modifiers: {
+      // @ts-ignore
+      snakeCase: (str: string) => str.split(' ').join('-')
     }
-  },
-  modifiers: {
-    // @ts-ignore
-    snakeCase: (str: string) => str.split(' ').join('-')
   }
-}))
+})

specs/fixtures/basic_usage/nuxt.config.ts

@@ -1,6 +1,11 @@
 // https://nuxt.com/docs/guide/directory-structure/nuxt.config
 export default defineNuxtConfig({
   modules: ['./layer-module', '@nuxtjs/i18n'],
+  runtimeConfig: {
+    public: {
+      runtimeValue: 'Hello from runtime config!'
+    }
+  },
 
   i18n: {
     vueI18n: './config/i18n.config.ts'

specs/fixtures/basic_usage/pages/index.vue

@@ -172,5 +172,8 @@ useHead({
     <section>
       <div id="fallback-key">{{ $t('fallbackMessage') }}</div>
     </section>
+    <section>
+      <div id="runtime-config">{{ $t('runtimeKey') }}</div>
+    </section>
   </div>
 </template>