histoire-dev / histoire

⚡ Fast and beautiful interactive component playgrounds, powered by Vite
https://histoire.dev
MIT License
3.03k stars 174 forks source link

Nuxt3 nuxt-modules/icon custom icons not showing #718

Open letoast opened 3 weeks ago

letoast commented 3 weeks ago

Describe the bug

Similar to #590, the custom icon that is a .vue template inside /components/global isn't loaded.

Reproduction

Add nuxt-modules/icon and Histoire, add a custom .vue component in /components/global and try to use it

https://stackblitz.com/edit/histoire-nuxt3-starter-j5v2es?file=components%2FTestIcon.story.vue

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Xeon(R) CPU E5-2667 v3 @ 3.20GHz
    Memory: 83.14 GB / 127.92 GB
  Binaries:
    Node: 18.19.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.11 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Chrome: 124.0.6367.119
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.3636

Used Package Manager

yarn

Validations

stackblitz[bot] commented 3 weeks ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

letoast commented 3 weeks ago

Using @juleshry 's PR seems to fix this issue. It looks like the problem is the mocking of useNuxtApp which nuxt-icon uses as a plugin https://github.com/histoire-dev/histoire/pull/710