ULink make Histoire crash

[menthol]

Environment

• Operating System: Darwin
• Node Version: v22.12.0
• Nuxt Version: 3.15.0
• CLI Version: 3.17.2
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0-apha.10

Reproduction

https://codesandbox.io/p/devbox/nuxt-ui3-forked-jncllj

Description

Related : histoire-dev/histoire#702

When a component is ULink or uses ULink (ex: UButton), Histoire doesn't work anymore.

Additional context

No response

Logs

Link.vue:108 Uncaught (in promise) TypeError: Cannot destructure property 'href' of 'undefined' as it is undefined.
    at Link.vue:108:28
    at Proxy.renderFnWithContext (runtime-core.esm-bundler.js?v=896f4f1e:699:13)
    at Proxy.<anonymous> (components.mjs:12:28)
    at renderComponentRoot (runtime-core.esm-bundler.js?v=896f4f1e:6521:16)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?v=896f4f1e:5343:46)
    at ReactiveEffect.run (reactivity.esm-bundler.js?v=896f4f1e:198:19)
    at setupRenderEffect (runtime-core.esm-bundler.js?v=896f4f1e:5478:5)
    at mountComponent (runtime-core.esm-bundler.js?v=896f4f1e:5253:7)
    at processComponent (runtime-core.esm-bundler.js?v=896f4f1e:5206:9)
    at patch (runtime-core.esm-bundler.js?v=896f4f1e:4722:11)

[menthol]

Looks like this fix the problem

diff --git a/dist/runtime/components/Link.vue b/dist/runtime/components/Link.vue
index 30d73d7d4ca5a87e456ddda6fea03872cc13cc5c..adac9b949d3116bb1e05593d7dae46975d3b0975 100644
--- a/dist/runtime/components/Link.vue
+++ b/dist/runtime/components/Link.vue
@@ -172,7 +172,7 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
 </script>
 
 <template>
-  <NuxtLink v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }" v-bind="nuxtLinkProps" custom>
+  <NuxtLink v-slot="slotData" v-bind="nuxtLinkProps" custom>
     <template v-if="custom">
       <slot
         v-bind="{
@@ -180,12 +180,12 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
           as,
           type,
           disabled,
-          href,
-          navigate,
-          rel,
-          target,
-          isExternal,
-          active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+          href: slotData?.href,
+          navigate: slotData?.navigate,
+          rel: slotData?.rel,
+          target: slotData?.target,
+          isExternal: slotData?.isExternal,
+          active: isLinkActive({ route: slotData?.route, isActive: slotData?.isActive, isExactActive: slotData?.isExactActive })
         }"
       />
     </template>
@@ -196,15 +196,15 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
         as,
         type,
         disabled,
-        href,
-        navigate,
-        rel,
-        target,
-        isExternal
+        href: slotData?.href,
+        navigate: slotData?.navigate,
+        rel: slotData?.rel,
+        target: slotData?.target,
+        isExternal: slotData?.isExternal
       }"
-      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+      :class="resolveLinkClass({ route: slotData?.route, isActive: slotData?.isActive, isExactActive: slotData?.isExactActive })"
     >
-      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
+      <slot :active="isLinkActive({ route: slotData?.route, isActive: slotData?.isActive, isExactActive: slotData?.isExactActive })" />
     </ULinkBase>
   </NuxtLink>
 </template>