ERROR At least one <template> or <script> is required in a single file component.

[unshame]

By adding the vue plugin to nuxt here:

https://github.com/hirotaka/storybook-addon-nuxt/blob/main/src/preset.ts#L109

you end up compiling the vue files twice because nuxt adds these plugins after the hook is called.

https://github.com/nuxt/nuxt/blob/d2aee40b9d19bc59ce0dfb8ff43c8645711fcefd/packages/vite/src/client.ts#L133

This means that the second compilation attempt fails with

ERROR  At least one <template> or <script> is required in a single file component.

You can simply wait for nuxt to finish building instead.

main...unshame:storybook-addon-nuxt:fix/wait-for-nuxt

[Clive-Ward-Cron]

@unshame Any status update on this? This package seems really promising and I'd like to integrate Storybook using this but I ran into this issue right away.

[unshame]

@Clive-Ward-Cron I've submitted a PR, but I'm not the maintainer so can't do much beyond that.
There's the issue that the app setup function cannot be used with this plugin, so until that is fixed it's not really a viable solution for integrating nuxt with storybook.

[unshame]

I actually found I can get pretty far just by using unplugin-auto-import and unplugin-vue-components vite plugins and a custom component resolver that parses .nuxt/components.d.ts. Running nuxt really doesn't do much beyond resolving auto-imports. You still have to mock all nuxt functions and components. And the plugins and modules still won't work, because they are applied to the nuxt instance's vue app and not the vue app storybook creates, so you have to add things like the router, pinia and i18n to storybook manually.

[Clive-Ward-Cron]

I actually found I can get pretty far just by using unplugin-auto-import and unplugin-vue-components vite plugins and a custom component resolver that parses .nuxt/components.d.ts.

Really? I configured unplugin-auto-import but I didn't try the vue-components one or doing a custom resolver. I'm going to have to try that.

I just saw your update and having to do so many mocks is a real bummer.

[unshame]

I think the best way to solve this would be for nuxt to implement some alternative test mode, where only the bare minimum of nuxt functionality is enabled and can be added to an external vue app. Then that mode can be used to implement a storybook framework preset and a vitest environment. Because currently this package shares similar issues with this nuxt vitest plugin https://github.com/danielroe/nuxt-vitest : nuxt is built and run, but it just kind of sits on the side and all of its functionality has to be manually mocked.

[Clive-Ward-Cron]

Yeah I've also had a few issues with nuxt-vitest. I just got it working in my codebase again the other day. Maybe running Storybook in a nuxt module that displays in a nuxt dev tools panel would work? It would take a way from some of Storybook's best features though.

[unshame]

The problem is that nuxt creates its own vue app and adds stuff like plugins and modules to it, and storybook/vue-test-utils create their own vue apps. So I believe some way to tell nuxt to target those external vue apps instead is needed.

[IJsLauw]

I actually found I can get pretty far just by using unplugin-auto-import and unplugin-vue-components vite plugins and a custom component resolver that parses .nuxt/components.d.ts. Running nuxt really doesn't do much beyond resolving auto-imports. You still have to mock all nuxt functions and components. And the plugins and modules still won't work, because they are applied to the nuxt instance's vue app and not the vue app storybook creates, so you have to add things like the router, pinia and i18n to storybook manually.

I would like to try this out, just so I can get a better grip on things. Can you show me how to do that as you said above?

[unshame]

@IJsLauw here you go https://github.com/unshame/nuxt-storybook

[usamatariqnetshore]

Any fix on this?. i am facing same error (ERROR At least one or <script> is required in a single file component.)