components global:true results in: At least one <template> or <script> is required in a single file component

[LucaMargadant]

Thank you a lot for this package. It works very well and i'm super happy that we now have something for nuxt to work with storybook! 👍

I noticed that if you have set global components in nuxt.config to true like this for example, components: { global: true, dirs: ['~/components/global']},, for every globally registered component there will be rendered an error At least one <template> or <script> is required in a single file component.

If you click away the error the storybook and all stories are working as expected until you click on another story.

It's probably a low priority one, because global components are not recommended anyways, but in some circumstances global components can make sense so i just wanted to drop that one here.

[g1ronn1mo]

How did you install the package? I cant get it running :(

[chakAs3]

Thank you a lot for this package. It works very well and I'm super happy that we now have something for Nuxt to work with storybook! 👍

Welcome, I'm really glad to hear that, I was aware of the importance of Nuxt especially for scalable enterprise applications, I put it last in the Q2 roadmap because I had to rewrite the vue3 renderer in reactive mode first for v7, there are other awesome features for Vue developers, Storybook will have a Vue taste and not just a second choice. i am happy to put Vue as a first-class citizen in Storybook, I would love to get more feedback. from the community then I can improve Storybook for Vue / Nuxt

[vloss3]

due to this error, the vueApp is not being mounted(undefined) and composables fail:

runtime.js:4 Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at ...

[oliver-lehner]

I run into the same error but I haven't set up global components explicitly. I'm using @storyblok/nuxt though and it does use globals.

[rezkileap]

I got same issue with oliver-lehner while developing a Storyblok based component (I explicitly use global component since I'm creating a Nuxt Module), any updates on this issue or ETA when will the global component work?

[chakAs3]

@rezkileap i can't reproduce your bug,. Here NuxtWelome component working fine as well as the Entire Vuetify components which are all global, please explain show there are global

try it live https://stackblitz.com/~/github.com/chakAs3/nuxt-storybook-vuetify

[rezkileap]

I boostrap the Nuxt authoring module repo, then in the playground folder, I installed the Storybook, I use 'npx storybook-nuxt init' and opted for pnpm. Now, everything was working fine (including creating a story from the runtime folder) until I tried to import a component that required Nuxt Image or one that depended on another component. I've linked a simple repo to replicate this issue. I hope this make sense https://github.com/rezkileap/nuxt-module-authoring-kit-with-sb7

[chakAs3]

@rezkileap you have to add the @nuxtjs/storybook module to your. playground/nuxt.config i have push change in PR to your repo

[vloss3]

@chakAs3 sadly it still doesn't work, in @rezkileap example: https://stackblitz.com/~/github.com/rezkileap/nuxt-module-authoring-kit-with-sb7 run: cd playground && npm install && npm run build-storybook

ERROR  [vite:vue] At least one <template> or <script> is required in a single file component.                            19:04:38
file: /home/rezkileap/nuxt-module-authoring-kit-with-sb7/src/runtime/components/testComp.vue?nuxt_component=async

=> Failed to build the preview                                                                                            19:04:38
SyntaxError: At least one <template> or <script> is required in a single file component.                                  19:04:38
    at Object.parse$2 [as parse] (file://./node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1904:7)
    at createDescriptor (file://./node_modules/@vitejs/plugin-vue/dist/index.mjs:90:43)
    at transformMain (file://./node_modules/@vitejs/plugin-vue/dist/index.mjs:2302:34)
    at Object.transform (file://./node_modules/@vitejs/plugin-vue/dist/index.mjs:2834:16)
    at eval (file://./node_modules/rollup/dist/es/shared/node-entry.js:25569:40)
                                                                                                                          19:04:38
? Would you like to help improve Storybook by sending anonymous crash reports? › (Y/n)                                    19:04:38

In the example above the components are added via module:

await addComponentsDir({
  path: resolve('./runtime/components/'),
  global: true,
  pathPrefix: true,
  prefix: 'Mds',
 })

but it also doesn't work if you add components directly to ./components/global/component.vue which makes them global

[cyruscollier]

I've having the same issue. Our Nuxt 3 application requires some global components due to a need to dynamically use resolveComponent() with a component name as a variable rather than a literal string.

I did some digging on what might be happening when Nuxt is loaded through Storybook using this add-on. When Nuxt is started normally, the Vue compiler receives a component's source, which is just the component file's raw content as a string, e.g. <template><button>Test</button></template><script></script>. However, when Storybook loads Nuxt, that source string for global components appears to be an async component export, e.g. import { defineAsyncComponent } from "vue"\n export default defineAsyncComponent(() => import("/Users/ccollier/Develop/test-project/components/global/GlobalTest.vue").then(r => r.default))

It looks like there's some missing step where Storybook and/or Vite needs to actually evaluate that dynamic export so that the source is the actual file content. Perhaps Storybook isn't expecting these global components to be auto-imported at startup and isn't handling it correctly? I'm not sure how to fix this (yet), but hopefully this might point the maintainers in the right direction.

[rpowersstl]

@cyruscollier I am having the same problem

' ERROR Internal server error: At least one