From dda0cebc761c00042ad82bb4c2a47b679581755a Mon Sep 17 00:00:00 2001
From: Kevin Marrec <kevin@marrec.io>
Date: Mon, 4 Apr 2022 10:23:11 +0200
Subject: [PATCH] feat(nuxt3): extends support for `app/router.options` (#3939)

---
 packages/nuxt3/src/pages/module.ts                    | 11 ++++++++---
 test/basic.test.ts                                    |  9 +++++++++
 test/fixtures/basic/extends/bar/app/router.options.ts |  5 +++++
 test/fixtures/basic/extends/foo/app/router.options.ts |  6 ++++++
 test/fixtures/basic/pages/index.vue                   |  3 +++
 5 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 test/fixtures/basic/extends/bar/app/router.options.ts
 create mode 100644 test/fixtures/basic/extends/foo/app/router.options.ts

diff --git a/packages/nuxt3/src/pages/module.ts b/packages/nuxt3/src/pages/module.ts
index fb8301413e..ab7ef47d73 100644
--- a/packages/nuxt3/src/pages/module.ts
+++ b/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')
       }
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 62931bd3f5..1d2058482c 100644
--- a/test/basic.test.ts
+++ b/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', () => {
diff --git a/test/fixtures/basic/extends/bar/app/router.options.ts b/test/fixtures/basic/extends/bar/app/router.options.ts
new file mode 100644
index 0000000000..ea8b48b182
--- /dev/null
+++ b/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'
+}
diff --git a/test/fixtures/basic/extends/foo/app/router.options.ts b/test/fixtures/basic/extends/foo/app/router.options.ts
new file mode 100644
index 0000000000..1504a42fa6
--- /dev/null
+++ b/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'
+}
diff --git a/test/fixtures/basic/pages/index.vue b/test/fixtures/basic/pages/index.vue
index 3302ee453c..f4de47d716 100644
--- a/test/fixtures/basic/pages/index.vue
+++ b/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>