fix: stub RouterLink, fix #107

examples/nuxt3/components/BaseButtonLink.story.vue

@@ -0,0 +1,18 @@
+<template>
+  <Story
+    title="BaseButton with NuxtLink"
+    :layout="{
+      type: 'single',
+      iframe: false,
+    }"
+  >
+    <Variant>
+      <BaseButtonLink
+        variant="primary"
+        to="#"
+      >
+        Hello world
+      </BaseButtonLink>
+    </Variant>
+  </Story>
+</template>

examples/nuxt3/components/BaseButtonLink.vue

@@ -0,0 +1,38 @@
+<template>
+  <NuxtLink
+    v-if="to"
+    :class="computedClasses"
+    :to="to"
+  >
+    <slot />
+  </NuxtLink>
+  <button
+    v-else
+    :class="computedClasses"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  to?: string
+  variant: 'primary' | 'secondary'
+}>()
+
+const computedClasses = computed(() => ({
+  'btn-base': true,
+  'btn-primary': props.variant === 'primary',
+}))
+</script>
+
+<style scoped>
+.btn-base {
+  padding: 7px 14px;
+}
+
+.btn-primary {
+  background: black;
+  color: white;
+}
+</style>

packages/histoire/src/client/app/components/sandbox/RouterLinkStub.ts

@@ -0,0 +1,48 @@
+// From: https://github.com/vuejs/test-utils/blob/main/src/components/RouterLinkStub.ts
+
+import { defineComponent, h, computed } from 'vue'
+
+// match return type of router.resolve: RouteLocation & { href: string }
+const defaultRoute = {
+  path: '/',
+  name: undefined as string | undefined,
+  redirectedFrom: undefined as object | undefined,
+  params: {},
+  query: {},
+  hash: '',
+  fullPath: '/',
+  matched: [] as object[],
+  meta: {},
+  href: '/',
+}
+
+// TODO: Borrow typings from vue-router-next
+export const RouterLinkStub = defineComponent({
+  name: 'RouterLinkStub',
+
+  compatConfig: { MODE: 3 },
+
+  props: {
+    to: {
+      type: [String, Object],
+      required: true,
+    },
+    custom: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  render () {
+    const route = computed(() => defaultRoute)
+    // mock reasonable return values to mimic vue-router's useLink
+    const children = this.$slots?.default?.({
+      route,
+      href: computed(() => route.value.href),
+      isActive: computed(() => false),
+      isExactActive: computed(() => false),
+      navigate: async () => {},
+    })
+    return this.custom ? children : h('a', undefined, children)
+  },
+})

packages/histoire/src/client/app/components/sandbox/SandboxVue3.vue

@@ -3,6 +3,7 @@ import { App, createApp, onMounted, onUnmounted, PropType, ref, watch } from 'vu
 import { Story, Variant, PropDefinition, AutoPropComponentDefinition } from '../../types'
 import { getTagName } from '../../codegen/vue3'
 import { applyStateToVariant } from '../../util/state'
+import { RouterLinkStub } from './RouterLinkStub'
 // @ts-expect-error virtual module id
 import * as setup from '$histoire-setup'
 // @ts-expect-error virtual module id
@@ -125,6 +126,9 @@ async function mountVariant () {
     },
   })
 
+  // Stubs
+  app.component('RouterLink', RouterLinkStub)
+
   if (typeof generatedSetup?.setupVue3 === 'function') {
     await generatedSetup.setupVue3({
       app,