🐛 Error when rendering Nuxt UI `UButton` in Histoire (Nuxt 4)

[vicventum]

Describe the bug

When using Histoire with Nuxt 4 and Nuxt UI, rendering a component that internally uses UButton causes a runtime error and prevents the story from rendering.

The error occurs immediately when opening the story. Components that directly use NuxtLink do not trigger this issue, which suggests the problem may be related to how UButton integrates NuxtLink internally when running inside Histoire.

Reproduction

I used the Nuxt 4 example from the official repository, where I simply added Nuxt UI to the project and modified the BaseButton component to use the UButton component from Nuxt UI.

Stackblitz example to play on live error here

Steps to reproduce

1. Create a standard Nuxt 4/Tailwind 4 project
2. Install and configure Histoire using @histoire/plugin-nuxt
3. Install @nuxt/ui
4. Create a component that uses UButton internally (e.g. BaseButton)
5. Create a Histoire story for that component
6. Open the story in the Histoire UI

---

Minimal reproduction (story example)

<Story
  title="BaseButton"
  :layout="{
    type: 'grid',
    width: 200,
  }"
>
  <Variant
    title="playground"
    :init-state="initState"
  >
    <template #default="{ state }">
      <BaseButton
        :disabled="state.disabled"
      >
        Click me
      </BaseButton>
    </template>
  </Variant>
</Story>

BaseButton internally uses UButton from @nuxt/ui.

---

Actual behavior

• The component is not rendered
• The following error appears in the browser console:

Uncaught (in promise) TypeError: Cannot destructure property 'href' of 'undefined' as it is undefined.
    at Proxy.<anonymous> (virtual:nuxt:C:/User…/components.mjs:12:28)

---

Expected behavior

UButton should render correctly inside Histoire without throwing runtime errors.

---

Additional notes

• Using NuxtLink directly inside a story works without issues
• The error only appears when using UButton
• This may be related to how Histoire mocks or provides Nuxt internals (router / link handling)

System Info

### Environment

* **Nuxt**: `4.2.2`
* **Vue**: `3.5.26`
* **Histoire**: `1.0.0-beta.1`
* **@histoire/plugin-nuxt**: `1.0.0-beta.1`
* **@nuxt/ui**: `4.3.0`
* **Node.js**: (same as local environment)
* **Package manager**: pnpm

#### `package.json`


{
  "name": "histoire-example-nuxt4",
  "type": "module",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "story:dev": "histoire dev",
    "story:build": "histoire build",
    "story:preview": "histoire preview --port 4567",
    "ci": "start-server-and-test story:preview http://localhost:4567/ test",
    "test": "cypress run",
    "test:dev": "cypress open --config baseUrl=http://localhost:6006",
    "test:examples": "pnpm run story:build && pnpm run ci"
  },
  "devDependencies": {
    "@histoire/plugin-nuxt": "^1.0.0-beta.1",
    "@histoire/plugin-vue": "^1.0.0-beta.1",
    "@nuxtjs/tailwindcss": "^6.12.2",
    "cypress": "^13.16.1",
    "histoire": "^1.0.0-beta.1",
    "nuxt": "^4.2.2",
    "start-server-and-test": "^2.0.8",
    "vue": "^3.5.26"
  },
  "dependencies": {
    "@nuxt/ui": "^4.3.0"
  }
}

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[martijndewit]

I'm also trying to get it working with Nuxt 4.
https://github.com/histoire-dev/histoire/blob/v1.0.0-beta.1/packages/histoire-plugin-nuxt/package.json is still trying to resolve old packages
so npm install --legacy-peer-deps needs to be done to get it running.

When running the sandbox I get:
Error while collecting story /home/projects/gqaimvagnv.github/app/components/AutoImport.story.vue: TypeError: Object.defineProperty called on non-object

[kentleighenglish]

Doing some hotfixing on this, I was able to quickly resolve it by changing ctx.slots.default?.() to ctx.slots.default?.({}) in /packages/histoire-plugin-nuxt/runtime/components.mjs.