fix(nuxt): prevent fallthrough attributes on custom NuxtLink (#19379)

huang-julien · Mar 2, 2023 · 0be8cda · 0be8cda
1 parent d4a7524
commit 0be8cda
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/packages/nuxt/src/app/components/nuxt-link.ts b/packages/nuxt/src/app/components/nuxt-link.ts
@@ -211,20 +211,29 @@ export function defineNuxtLink (options: NuxtLinkOptions) {
 
       return () => {
         if (!isExternal.value) {
+          const routerLinkProps: Record<string, any> = {
+            ref: process.server ? undefined : (ref: any) => { el!.value = ref?.$el },
+            to: to.value,
+            activeClass: props.activeClass || options.activeClass,
+            exactActiveClass: props.exactActiveClass || options.exactActiveClass,
+            replace: props.replace,
+            ariaCurrentValue: props.ariaCurrentValue,
+            custom: props.custom
+          }
+
+          // `custom` API cannot support fallthrough attributes as the slot
+          // may render fragment or text root nodes (#14897, #19375)
+          if (!props.custom) {
+            if (prefetched.value) {
+              routerLinkProps.class = props.prefetchedClass || options.prefetchedClass
+            }
+            routerLinkProps.rel = props.rel
+          }
+
           // Internal link
           return h(
             resolveComponent('RouterLink'),
-            {
-              ref: process.server ? undefined : (ref: any) => { el!.value = ref?.$el },
-              to: to.value,
-              ...((prefetched.value && !props.custom) ? { class: props.prefetchedClass || options.prefetchedClass } : {}),
-              activeClass: props.activeClass || options.activeClass,
-              exactActiveClass: props.exactActiveClass || options.exactActiveClass,
-              replace: props.replace,
-              ariaCurrentValue: props.ariaCurrentValue,
-              custom: props.custom,
-              rel: props.rel
-            },
+            routerLinkProps,
             slots.default
           )
         }

diff --git a/test/bundle.test.ts b/test/bundle.test.ts
@@ -40,7 +40,7 @@ describe.skipIf(isWindows)('minimal nuxt application', () => {
 
   it('default server bundle size', async () => {
     stats.server = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
-    expect(stats.server.totalBytes).toBeLessThan(92900)
+    expect(stats.server.totalBytes).toBeLessThan(93000)
 
     const modules = await analyzeSizes('node_modules/**/*', serverDir)
     expect(modules.totalBytes).toBeLessThan(2722000)