fix: messages provided by layer vuei18n config files not merging

specs/fixtures/layer_consumer/app.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>
+
+<style>
+section {
+  margin: 1rem 0;
+}
+</style>

specs/fixtures/layer_consumer/components/LangSwitcher.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useI18n, useSwitchLocalePath } from '#i18n'
+
+const { locales, locale, setLocale } = useI18n()
+const switchLocalePath = useSwitchLocalePath()
+</script>
+
+<template>
+  <div>
+    <template v-for="locale in locales" :key="locale">
+      <section :id="`lang-switcher-with-nuxt-link-${locale}`">
+        <strong>Using <code>NuxtLink</code></strong
+        >:
+        <NuxtLink :exact="true" :to="switchLocalePath(locale)">{{ locale }}</NuxtLink>
+      </section>
+      <section id="lang-switcher-with-set-locale">
+        <strong>Using <code>setLocale()</code></strong
+        >:
+        <a :id="`set-locale-link-${locale}`" :key="`b-${locale}`" href="#" @click.prevent="setLocale(locale)">{{
+          locale
+        }}</a>
+      </section>
+    </template>
+    <section id="lang-switcher-current-locale">
+      <strong
+        >Current Locale: <code>{{ locale }}</code></strong
+      >:
+    </section>
+  </div>
+</template>

specs/fixtures/layer_consumer/i18n.config.ts

@@ -0,0 +1 @@
+export default {}

specs/fixtures/layer_consumer/layer-simple/i18n.config.ts

@@ -0,0 +1,10 @@
+export default {
+  messages: {
+    fr: {
+      thanks: 'Merci!'
+    },
+    nl: {
+      thanks: 'Bedankt!'
+    }
+  }
+}

specs/fixtures/layer_consumer/layer-simple/nuxt.config.ts

@@ -0,0 +1,10 @@
+// https://nuxt.com/docs/guide/directory-structure/nuxt.config
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/i18n'],
+  i18n: {
+    locales: ['fr', 'nl'],
+    defaultLocale: 'nl',
+    detectBrowserLanguage: false,
+    vueI18n: './i18n.config.ts'
+  }
+})

specs/fixtures/layer_consumer/nuxt.config.ts

@@ -0,0 +1,5 @@
+// https://nuxt.com/docs/guide/directory-structure/nuxt.config
+export default defineNuxtConfig({
+  extends: ['./layer-simple'],
+  modules: ['@nuxtjs/i18n']
+})

specs/fixtures/layer_consumer/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "nuxt3-test-fallback",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxt build",
+    "start": "node .output/server/index.mjs"
+  },
+  "devDependencies": {
+    "@nuxtjs/i18n": "latest",
+    "nuxt": "latest"
+  }
+}

specs/fixtures/layer_consumer/pages/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useHead } from '#imports'
+import { useI18n, useLocalePath, useLocaleHead } from '#i18n'
+import LangSwitcher from '../components/LangSwitcher.vue'
+
+const { t } = useI18n()
+const localePath = useLocalePath()
+const i18nHead = useLocaleHead({ addSeoAttributes: { canonicalQueries: ['page'] } })
+
+useHead({
+  title: t('home'),
+  htmlAttrs: {
+    lang: i18nHead.value.htmlAttrs!.lang
+  },
+  link: [...(i18nHead.value.link || [])],
+  meta: [...(i18nHead.value.meta || [])]
+})
+</script>
+
+<template>
+  <div>
+    <div id="layer-message">{{ $t('thanks') }}</div>
+    <LangSwitcher />
+    <section>
+      <strong><code>useHead</code> with <code>useLocaleHead</code></strong
+      >:
+      <code id="home-use-locale-head">{{ i18nHead }}</code>
+    </section>
+  </div>
+</template>

specs/layers/layers_vuei18n_options.spec.ts

@@ -0,0 +1,19 @@
+import { describe, test, expect } from 'vitest'
+import { fileURLToPath } from 'node:url'
+import { setup, url, createPage } from '../utils'
+import { getText } from '../helper'
+
+describe('nuxt layers vuei18n options', async () => {
+  await setup({
+    rootDir: fileURLToPath(new URL(`../fixtures/layer_consumer`, import.meta.url)),
+    browser: true
+  })
+
+  test('layer vueI18n options provides `nl` message', async () => {
+    const home = url('/')
+    const page = await createPage(undefined) // set browser locale
+    await page.goto(home)
+
+    expect(await getText(page, '#layer-message')).toEqual('Bedankt!')
+  })
+})

src/gen.ts

@@ -179,6 +179,7 @@ export function generateLoaderOptions(
           } else {
             genCodes += `  ${rootKey}.${key} = ${toCode({})}\n`
           }
+          genCodes += `  ${rootKey}.${key}.messages ??= {}\n`
 
           if (vueI18nConfigPaths.length > 0) {
             genCodes += `  const deepCopy = (src, des, predicate) => {
@@ -199,9 +200,10 @@ export function generateLoaderOptions(
           }
           const mergeMessages = async (messages, loader) => {
             const layerConfig = await vueI18nConfigLoader(loader)
-            const vueI18n = layerConfig.vueI18n || {}
+            const vueI18n = layerConfig || {}
             const layerMessages = vueI18n.messages || {}
             for (const [locale, message] of Object.entries(layerMessages)) {
+              messages[locale] ??= {}
               deepCopy(message, messages[locale])
             }
           }

test/__snapshots__/gen.test.ts.snap

@@ -162,6 +162,7 @@ export const resolveNuxtI18nOptions = async (context) => {
                 : {}
           }
   nuxtI18nOptions.vueI18n = Object({})
+  nuxtI18nOptions.vueI18n.messages ??= {}
   const deepCopy = (src, des, predicate) => {
             for (const key in src) {
               if (typeof src[key] === 'object') {
@@ -180,9 +181,10 @@ export const resolveNuxtI18nOptions = async (context) => {
           }
           const mergeMessages = async (messages, loader) => {
             const layerConfig = await vueI18nConfigLoader(loader)
-            const vueI18n = layerConfig.vueI18n || {}
+            const vueI18n = layerConfig || {}
             const layerMessages = vueI18n.messages || {}
             for (const [locale, message] of Object.entries(layerMessages)) {
+              messages[locale] ??= {}
               deepCopy(message, messages[locale])
             }
           }