How do we make nuxt-icon work in Storybook?

[nasianss]

Is it possible to make work in Storybook? Thank you

[ricovandevin]

I'm interested in this too. A fair amount of Googling and trying some potential solutions did not give me a way to accomplish this.

[Atinux]

Would be nice to have a repository / reproduction to help

[miclgael]

Is the issue that it causes an error / warning?

If its anything like my experience getting nuxt-link to work, you may need to make a mock component.

https://github.com/miclgael/chia/blob/main/.storybook/mock-components/NuxtLink.js

[Atinux]

Could you take a look at https://github.com/hirotaka/storybook-addon-nuxt and tell me if this works?

[miclgael]

For me, storybook-addon-nuxt will throw an error when trying to use icon.

Interested to hear from you on this @nasianss 🙏

I will try to make a reproduction as well.

[miclgael]

@Atinux My reproduction with storybook-addon-nuxt yields [Vue warn]: Failed to resolve component: icon If this is a native custom element, make sure to exclude it from component

https://stackblitz.com/edit/nuxt-starter-nivfnx?file=stories%2FIconTester.vue,stories%2FIconTester.stories.js

npm run storybook

I think this is a common issue - where every module in the nuxt ecosystem requires some sort of patch or workaround to work in Storybook.

e.g. https://github.com/hirotaka/storybook-addon-nuxt/issues/5

[DenFin]

@miclgael I'm getting the exact same error. Did you find a way to get this to work?

[miclgael]

@miclgael I'm getting the exact same error. Did you find a way to get this to work?

@DenFin It’s not ideal, but I think you would have to mock it for now. :(

[DenFin]

@miclgael Thanks for your reply.

I solved it by adding the Material Symbols icon font directly in my project and use it in a stylesheet

[TiBianMod]

@Atinux here you have a reproduction repo for testing

use main branche first to see that Storybook & Nuxt with Local components and Nuxt components is working !!! and then switch to nuxt-icon branch and enjoy 😄

from the moment you add nuxt-icon on modules, the issues starts, you don't even need to used on any story !!!

export default defineNuxtConfig({
    modules: ["@nuxtjs/storybook", "nuxt-icon"],
});

[zola33dsf]

Any updates please ?

[memtech3]

I'm also experiencing this issue. I've glanced at IconCss.vue and nothing looks blaringly wrong there. Could this be a problem with all of the module. files? They seem* to be written sort of differently than nuxtUI writes theirs.

[memtech3]

When I comment out the parts of module.mjs that import IconCSS.vue, (lines 91-95 in the npm package) storybook complains about template/script tags in Icon.vue. When I remove Icon.vue from module.mjs storybook stops complaining. Hopefully this is helpful diagnostic info

duplicate of #128