histoire-dev / histoire-dev/histoire

Nuxt3 nuxt-modules/icon custom icons not showing

Open
#718 3 comments 1 reaction 0 assignees View on GitHub
to triage
Dominant language
TypeScript
Stars
3.6k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

Similar to [#590](https://github.com/histoire-dev/histoire/issues/590), the custom icon that is a .vue template inside /components/global isn't loaded.

### Reproduction

Add [nuxt-modules/icon](https://nuxt.com/modules/icon#vue-component) 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

```shell
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

- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue in the linked StackBlitz example with a custom .vue component under /components/global and nuxt-modules/icon. Compare the behavior with issue #590 and trace how Histoire discovers global components. Done means the custom icon component renders when used from the story at components/TestIcon.story.vue.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxtjs
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.