NuxtIcon not rendered in Histoire

[lud-hu]

Describe the bug

After having a lot of trouble trying to get Storybook running in my nuxt project, I figured I give histoire a try.
But unfortunately I'm running in a lot of problems as well.
One of them is the <NuxtIcon /> is just not rendered at all, but working fine in the nuxt app.

Reproduction

https://github.com/lud-hu/nuxt-histoire-reproduction

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 68.38 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - /opt/homebrew/opt/node@18/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - /opt/homebrew/opt/node@18/bin/npm
    pnpm: 8.15.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.139
    Edge: 121.0.2277.98
    Safari: 17.0
  npmPackages:
    @histoire/plugin-nuxt: ^0.17.9 => 0.17.9 
    @histoire/plugin-vue: ^0.17.9 => 0.17.9 
    histoire: ^0.17.9 => 0.17.9

Used Package Manager

yarn

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.

[positiveprogrammer]

Same here. I found two issues.

• Problem 1: NuxtIcon is an async component, so Wrap NuxtIcon with Suspense.
• Problem 2: NuxtIcon is accessing the vueApp.component that is stubbed out.

My workaround was to add a stub of the vueApp.component in the useNuxtApp composable stub of histoire. Or add guard code for vueApp.component access from NuxtIcon Side.

If we could override useNuxtApp stub, it would be nice for these problems

[lud-hu]

Thanks for the fix, @Akryum!
Do you publish new versions of histoire to npmjs regularly? The 0.17.11 that contains this fix is marked as a release here at github but not yet published to npmjs. Thx!

[itslewin]

Thanks for the fix, @Akryum! Do you publish new versions of histoire to npmjs regularly? The 0.17.11 that contains this fix is marked as a release here at github but not yet published to npmjs. Thx!

It's published in "@histoire/plugin-vue": "^0.17.11".

My workaround was to add a stub of the vueApp.component in the useNuxtApp composable stub of histoire.

@positiveprogrammer Can you elaborate on how you did that?

[positiveprogrammer]

You can find stub of composables in histoire/plugin-nuxt/runtime/composables.mjs

You could change the stub like the one below. Just skip the exception
export const useNuxtApp = () => ({ runWithContext: async (fn) => await fn(), vueApp: { components: [] } })

[MaksymOsovitnii]

Hi all, thanks for the great lib.
But how was the issue described fix? How can NuxtIcon be used in stories? @positiveprogrammer as I understood, you have found the solution, correct?

[positiveprogrammer]

@MaksymOsovitnii I found 2 issues; the Histoire team already fixed the first one, and the second issue is a little bit ambiguous since NuxtIcon tries to access vueApp to add NuxtIcon as a global component. Still, Histoire is stubbing useNuxtApp composable that doesn't have access to vueApp and components.

You can take a look at nuxt-icon/dist/runtime/Icon.Vue
When you use nuxt-icon in your story, the highlighted code will throw an exception. So I proposed a workaround to add vueApp and composable in histoire stub manually.

[MaksymOsovitnii]

@positiveprogrammer , thank you! Now it's clear to me.

[awacode21]

@positiveprogrammer where/how do i have to do the changes to get that running? I do not understand it. When there is an official plugin for nuxt i would expect the module to work

[awacode21]

MIght be releated: #746