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. hirotaka/storybook-addon-nuxt#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

[awacode21]

@nuxt/icon is also NOT working in histoire. Did you found a way for storybook? maybe it also helps with histoire?

[AdrianFahrbach]

@atinux Any updates on this or is there maybe a recommended workaround?

[simon-kramer]

Also would look forward for an update on this topic.

[QuanticPotatoes]

same issue here, any update ?

[AdrianFahrbach]

As a workaround you can use your own mock component as a replacement by adding this to your Storybooks preview.ts:

import NuxtIcon from './foo/bar/YourMockNuxtIcon.vue'

setup((app) => { app.component('NuxtIcon', NuxtIcon) })

This doesn't really solve the issue, but may work for some people.
I guess Storybook just doesn't work great with Nuxt Modules in general (as mentioned above). So if you need to use Storybook then it is probably better to avoid them or build your own mock components for each.

[QuanticPotatoes]

Thanks @AdrianFahrbach for the quick answer 👍!
I found a possible workaround as well :

1. Create a .storybook/middleware.js file in your Nuxt project with the following content:

const proxy = require('http-proxy-middleware')

module.exports = (router) => {
  router.use('/api/_nuxt_icon', proxy.createProxyMiddleware({
    target: 'http://localhost:3000/api/_nuxt_icon',
    changeOrigin: true,
    pathRewrite: {
      '^/api/_nuxt_icon': '',
    },
  }))
}

2. This middleware proxies requests from Storybook to your Nuxt server, resolving the 404 errors for icon requests.

3. Make sure to install the http-proxy-middleware package:

npm install http-proxy-middleware --save-dev

This solution worked for me by redirecting the /api/_nuxt_icon requests from Storybook to the Nuxt server running on port 3000. It should resolve the 404 errors for icon requests, allowing @nuxt/icon to work properly in Storybook.

Let me know if you need any clarification or have any questions about this approach!

[tkjaergaard]

@QuanticPotatoes Thank you, it worked.

I had to wrap my story with a suspense as well to get it working.

import type { Meta, StoryObj } from '@storybook/vue3'
import { h, Suspense } from 'vue'

import Button from './Button.vue'

const meta = {
  title: 'Features/Custom Components',
  component: Button,
  tags: ['autodocs'],
} satisfies Meta<typeof Button>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    label: 'My label',
    icon: 'material-symbols:arrow-right-alt',
  },
  render(args) {
    return {
      setup() {
        return () =>
          h(
            Suspense,
            h(Button, {
              ...args,
            }),
          )
      },
    }
  },
}

[tobiasdiez]

@QuanticPotatoes @tkjaergaard Thanks for your investigations! Could you please shortly summarize what you think is the underlying issue? It looks like both workarounds don't really have something in common. Or is the problem that the url is actually exposed from the storybook dev server, but only too late?

Hopefully we find the root and then fix it upstream in the storybook module.

[tkjaergaard]

@tobiasdiez I think that @QuanticPotatoes comment, is in relation to using https://github.com/nuxt-modules/storybook.

I my case it's the way previews are rendered inside of Storybook. NuxtIcon needs suspense to work, which works out of the box in Nuxt, but not in Storybook.

I ended up adding a suspense to my preview in .storybook/preview.ts file:

import { Preview } from '@storybook/vue3'
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
import { h, Suspense } from 'vue'

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    viewport: {
      viewports: INITIAL_VIEWPORTS,
    },
  },
  decorators: [
    (story) => {
      return {
        setup() {
          return () => h(Suspense, {}, [h(story())])
        },
      }
    },
  ],
}

export default preview

So in the case of Suspense. I don't think it's a NuxtIcon issue (IMO). Not sure how to handle the scenario when using @nuxtjs/storybook?

[luca-smartpricing]

If i manage to fix the problem with that work arround absolutely nothing is rendered and the following message is displayed:
Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".

[tkjaergaard]

@luca-smartpricing if you are using nuxt-storybook, i had the same issue on build.

I ended up adding this to my nuxt.config file:

{
  // ...
  vue: {
    runtimeCompiler: 'IS_STORYBOOK' in process.env,
  }
}

https://nuxt.com/docs/api/nuxt-config#runtimecompiler

Then is just added a `IS_STORYBOOK=true to my build command in package.json:

{
  "scripts": {
     "storybook": "IS_STORYBOOK=true storybook dev -p 6006",
     "build-storybook": "IS_STORYBOOK=true storybook build"
   }
}

That way i didn't have to bundle the runtime compiler in my actual Nuxt project resulting in a smaller bundle size.

[teco-yokoyama]

"storybook": "IS_STORYBOOK=true storybook dev -p 6006",

Thank you so much!
No matter what I wrote in the story template, it was not rendering, but doing this solved everything.