feat(nuxt3): extends support for app/router.options (#3939)

packages/nuxt3/src/pages/module.ts

@@ -83,15 +83,20 @@ export default defineNuxtModule({
       filename: 'router.options.mjs',
       getContents: async () => {
         // Check for router options
-        const routerOptionsFile = await findPath('~/app/router.options')
+        const routerOptionsFiles = (await Promise.all(nuxt.options._layers.map(
+          async layer => await findPath(resolve(layer.config.srcDir, 'app/router.options'))
+        ))).filter(Boolean)
+
         const configRouterOptions = genObjectFromRawEntries(Object.entries(nuxt.options.router.options)
           .map(([key, value]) => [key, genString(value as string)]))
+
         return [
-          routerOptionsFile ? genImport(routerOptionsFile, 'routerOptions') : '',
+          ...routerOptionsFiles.map((file, index) => genImport(file, `routerOptions${index}`)),
           `const configRouterOptions = ${configRouterOptions}`,
           'export default {',
           '...configRouterOptions,',
-          routerOptionsFile ? '...routerOptions' : '',
+          // We need to reverse spreading order to respect layers priority
+          ...routerOptionsFiles.map((_, index) => `...routerOptions${index},`).reverse(),
           '}'
         ].join('\n')
       }

test/basic.test.ts

@@ -239,6 +239,15 @@ describe('extends support', () => {
       expect(headers.get('injected-header')).toEqual('foo')
     })
   })
+
+  describe('app', () => {
+    it('extends foo/app/router.options & bar/app/router.options', async () => {
+      const html: string = await $fetch('/')
+      const routerLinkClasses = html.match(/href="\/" class="([^"]*)"/)[1].split(' ')
+      expect(routerLinkClasses).toContain('foo-active-class')
+      expect(routerLinkClasses).toContain('bar-exact-active-class')
+    })
+  })
 })
 
 describe('dynamic paths', () => {

test/fixtures/basic/extends/bar/app/router.options.ts

@@ -0,0 +1,5 @@
+import type { RouterOptions } from '@nuxt/schema'
+
+export default <RouterOptions>{
+  linkExactActiveClass: 'bar-exact-active-class'
+}

test/fixtures/basic/extends/foo/app/router.options.ts

@@ -0,0 +1,6 @@
+import type { RouterOptions } from '@nuxt/schema'
+
+export default <RouterOptions>{
+  linkActiveClass: 'foo-active-class',
+  linkExactActiveClass: 'foo-exact-active-class'
+}

test/fixtures/basic/pages/index.vue

@@ -7,6 +7,9 @@
     <div>RuntimeConfig | testConfig: {{ config.testConfig }}</div>
     <div>Composable | foo: {{ foo }}</div>
     <div>Composable | bar: {{ bar }}</div>
+    <NuxtLink to="/">
+      Link
+    </NuxtLink>
     <SugarCounter :count="12" />
     <CustomComponent />
   </div>