{"record":{"id":"7db705e914c2af77","repo":"vuejs/vue-router","slug":"in-vue-router-4-the-v-slot-api-will-by-default-wr","errorCode":null,"errorMessage":"In Vue Router 4, the v-slot API will by default wrap its content with an <a> element. Use the custom prop to remove this warning:\n<router-link v-slot=\"{ navigate, href }\" custom></router-link>\n","messagePattern":"In Vue Router 4, the v-slot API will by default wrap its content with an <a> element\\. Use the custom prop to remove this warning:\n<router-link v-slot=\"(.+?)\" custom></router-link>\n","errorType":"console","errorClass":null,"httpStatus":null,"severity":"info","filePath":"src/components/link.js","lineNumber":116,"sourceCode":"      on[this.event] = handler\n    }\n\n    const data: any = { class: classes }\n\n    const scopedSlot =\n      !this.$scopedSlots.$hasNormal &&\n      this.$scopedSlots.default &&\n      this.$scopedSlots.default({\n        href,\n        route,\n        navigate: handler,\n        isActive: classes[activeClass],\n        isExactActive: classes[exactActiveClass]\n      })\n\n    if (scopedSlot) {\n      if (process.env.NODE_ENV !== 'production' && !this.custom) {\n        !warnedCustomSlot && warn(false, 'In Vue Router 4, the v-slot API will by default wrap its content with an <a> element. Use the custom prop to remove this warning:\\n<router-link v-slot=\"{ navigate, href }\" custom></router-link>\\n')\n        warnedCustomSlot = true\n      }\n      if (scopedSlot.length === 1) {\n        return scopedSlot[0]\n      } else if (scopedSlot.length > 1 || !scopedSlot.length) {\n        if (process.env.NODE_ENV !== 'production') {\n          warn(\n            false,\n            `<router-link> with to=\"${\n              this.to\n            }\" is trying to use a scoped slot but it didn't provide exactly one child. Wrapping the content with a span element.`\n          )\n        }\n        return scopedSlot.length === 0 ? h() : h('span', {}, scopedSlot)\n      }\n    }\n\n    if (process.env.NODE_ENV !== 'production') {","sourceCodeStart":98,"sourceCodeEnd":134,"githubUrl":"https://github.com/vuejs/vue-router/blob/680ccc68c506cca9be6207745043245d61fa715a/src/components/link.js#L98-L134","documentation":"When <router-link> receives a scoped slot with a number of root children other than exactly one, it cannot render them as a single replacement element, so in dev it warns that it will wrap the content in a <span> instead. The library then renders h('span', {}, scopedSlot) to keep the DOM valid.","triggerScenarios":"<router-link to=\"...\" v-slot=\"{ ... }\"> containing zero children (empty slot) or more than one root node (e.g. two sibling elements or text plus an element), in dev mode with the functional/normal slot-length check (scopedSlot.length).","commonSituations":"Adding a comment node or whitespace-producing extra root inside the v-slot; components returning fragments (multiple roots); accidentally rendering an empty v-slot body.","solutions":["Wrap the slot content in a single root element (e.g. a <span> or <div>).","Remove empty/comment-only content from the v-slot body.","Use the custom prop with exactly one functional child or restructure to a single component root."],"exampleFix":"// before (two roots)\n<router-link to=\"/x\" custom v-slot=\"{ href, navigate }\"><span>A</span><span>B</span></router-link>\n// after (single root)\n<router-link to=\"/x\" custom v-slot=\"{ href, navigate }\"><span><span>A</span><span>B</span></span></router-link>","handlingStrategy":"validation","validationCode":"// template-time check: use custom whenever v-slot is present on router-link\n// e.g. ESLint rule idea: flag <router-link v-slot without custom","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Always pair v-slot on <router-link> with the custom prop.","Drop the scoped slot if you want the default anchor rendering.","Treat this warning as a migration checklist item when moving to vue-router 4.","Keep dev warnings enabled during development to catch these early."],"tags":["vue-router","router-link","scoped-slot","vue"],"backgroundTag":"router-link-scoped-slot-children","analyzedSha":"680ccc68c506cca9be6207745043245d61fa715a","analyzedAt":"2026-09-02T19:19:01.204Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}