@nuxt/icon does not work

[exophunk]

Environment

---

• Operating System: Darwin
• Node Version: v20.17.0
• Nuxt Version: 3.13.2
• CLI Version: 3.13.2
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, app, i18n, icon, imports, runtimeConfig, vue, compatibilityDate, vite
• Runtime Modules: @nuxtjs/[email protected], @nuxt/[email protected], @pinia/[email protected], @nuxt/[email protected], @nuxtjs/[email protected]
• Build Modules: -

---

Reproduction

https://github.com/exophunk/nuxt-storybook-showcase

Describe the bug

Using the official Nuxt Icon module does not work with storybook. Icons do not show in storybook stories. As far as I tested, both remote Icons from iconify, but also local icons do not work.

is there anyway to configure nuxt + storybook + icons to work? Storybook for visual components is pretty pointless if they don't show correctly.

Reproduction Repo: https://github.com/exophunk/nuxt-storybook-showcase
Stackblitz: https://stackblitz.com/~/github.com/exophunk/nuxt-storybook-showcase
although on stackblitz, i'm never able to get this things run properly
See the NuxtIcon story.

<Icon name="uil:github" style="color: black" />

Problem: No output at all (empty template)

Additional context

The reproduction uses a baseURL to showcase another issue but Icons should not be touched by that. Open the app at localhost:3000/my-base or remove baseurl for this example. but should not matter.

[Reckonyd]

I solved it using the solution provided in the comment below.

nuxt/icon#77 (comment)

Another possible solution may be by using Storybook decorators but I haven't tried it yet.

[luca-smartpricing]

I solved it using the solution provided in the comment below.

nuxt/icon#77 (comment)

Another possible solution may be by using Storybook decorators but I haven't tried it yet.

Seriously did you manage to fix the problem with that work arround?
If I add this code as nuxt/icon#77 (comment) suggest:

render(args) {
    return {
      setup() {
        return () =>
          h(
            Suspense,
            h(Button, {
              ...args,
            }),
          )
      },
    }
  },

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".

[Reckonyd]

Seriously did you manage to fix the problem with that work arround? If I add this code as nuxt/icon#77 (comment) suggest:

render(args) {
return {
setup() {
return () =>
h(
Suspense,
h(Button, {
...args,
}),
)
},
}
},

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".

Firstly, I want to apologize not being so clear about the "solution" I offered.

The referenced issue and others (@nuxt/image, @nuxt/fonts etc) stem from the fact that both Storybook and Nuxt server run on different ports ( and in my case on different protocols - Storybook on HTTP and Nuxt on HTTPS ). This unavoidable discrepancy causes some of Nuxt build files to not get served on Storybook page.

The solution is to change the Vite proxy configuration (on viteFinal config property) to match the ports (and protocols!) of our desired configuration (in my case Nuxt port 5173 and HTTPS protocol). Or use the referenced solution on every Story.

IMHO this Storybook module should expose configuration options or automatically configure the Storybook Vite proxy from the current Nuxt Dev server configuration.

As for the Vue error, a simple alias on Vite configuration has solve that problem for me.

Below is my Storybook configuration to solve those issues:

import type { StorybookConfig } from '@nuxtjs/storybook';

const config: StorybookConfig = {
  stories: [
    '../@(components|layouts|pages|stories)/**/*.mdx',
    '../@(components|layouts|pages|stories)/**/*.story.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-a11y',
    '@storybook/addon-essentials',
    '@storybook/addon-links',
    '@storybook/addon-themes',
  ],
  framework: {
    name: '@storybook-vue/nuxt',
    options: { docgen: 'vue-component-meta' },
  },
  async viteFinal(config) {
    const { mergeConfig } = await import('vite');

    return mergeConfig(config, {
      optimizeDeps: {
        include: ['jsdoc-type-pratt-parser'],
      },
      resolve: {
        alias: {
          // Resolve Vue bundler to support runtime compilation
          vue: 'vue/dist/vue.esm-bundler.js',
        },
      },
      server: {
        proxy: {
          // Change Vite proxy configuration to enable Storybook server to serve fonts from Nuxt Dev server
          '^/(_nuxt|_ipx|_icon|__nuxt_devtools__|_fonts)': {
            target: 'https://localhost:5173',
            changeOrigin: true,
            secure: false,
            ws: true,
          },
        },
      },
    });
  },
};
export default config;