Library is not compatible with storybook

[Codeus3262]

Version

@nuxthq/ui: v2.4.0 nuxt: v3.6.1 storybook: v7.0.24

Steps to reproduce

1. Install the component library
2. Install Storybook along with the Nuxt plugin for Storybook
3. Attempt to utilize the components from the library
4. Notice missing styles
5. Observe that dependencies such as NuxtLink, which are imported from the UI library, are not found (Note: NuxtLink works as expected when used within a standard component)

What is Expected?

The UI Library should seamlessly integrate with Storybook, allowing developers to extend and build custom applications effectively.

What is actually happening?

An error is encountered while trying to install the UI library into Storybook.

[benjamincanac]

Could you please provide a reproduction?

[zola33dsf]

I can confirm too that the library does not work with storybook..

[benjamincanac]

It would be helpful to know what is your issue with Storybook, are you using https://github.com/storybook-vue/storybook-nuxt or https://github.com/nuxt-modules/storybook?

[zola33dsf]

@benjamincanac I'm using this library : https://github.com/storybook-vue/storybook-nuxt I've posted an issue today

[SilasNiewierra]

Same here using https://storybook.nuxtjs.org/

[benjamincanac]

The @nuxtjs/storybook module is a Nuxt 2 module, it is not compatible with Nuxt 3. I guess you should use https://github.com/storybook-vue/storybook-nuxt but its quite new.

[TiBianMod]

will be really nice if we take the time and solve this issue of storybook and @nuxt/ui and @nuxt/ui-pro

for the moment none of the storybook modules is working with @nuxt/ui*

[benjamincanac]

Yet no one has provided a reproduction or an actual error of what is not working exactly.

[TiBianMod]

I will prepare later a reproduction repo

[TiBianMod]

@benjamincanac I have prepared the reproduction repo for you to test

Please read the Readme

[TiBianMod]

@benjamincanac we have any news, from where the issue is coming?

[benjamincanac]

This is indeed not working at all, there are errors about:

• At least one <template> or <script> is required in a single file component. on nuxt-icon/dist/runtime/IconCSS.vue
• NuxtLink not being defined in the Link component
• A default value needs to be a function when your type is an object or array on every component with class and ui props defaulting to undefined (thrown by vue-docgen-plugin)

Are we sure this module is done?

[TiBianMod]

after testing and testing again, the issue is coming from nuxt-icon module

if we going to install nuxt-icon module without nuxt-ui, we going to see exactly the same errors.

I added a branch for nuxt-icon, if you want you can give it a try

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

to determine if the nuxt-ui components working with storybook, the nuxt-icon needs first to be fixed!!

issue related to storybook and nuxt-icon: https://github.com/nuxt-modules/icon/issues/77

[itslewin]

Did anybody find a workaround to use NuxtUI with Storybook?

[zola33dsf]

Any updates? I still can't use it with storybook..

[memtech3]

I'm still experiencing this issue as well

[alexanderringor]

any chance someone able to get this working now? there's been updates with storybook and nuxtui but none of it seem to have fix this issue?

[cain]

Still having this issue

[ishimweemmy]

I might move off of nuxtui for this reason 😢