Storybook: Storybook doesn't see custom components

Created on 20 Aug 2020 · 2Comments · Source: nuxt-community/storybook

After following the instruction I have this error:

Unknown custom element: <Logo> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

The nuxt project was created with a command npx create-nuxt-app, then I added npm install --save-dev @nuxtjs/storybook. Because nuxt version is 2.0.0 I added core-js3. The storybook works but the component is not visible for it.

The story for Logo:

// Logo.stories.js
export default {
    title: "Logo"
  };

  export const NuxtLogo = () => "<Logo />";

I tried to update nuxt to 2.14.3 but without result.

Can I have a hint what I'm doing wrong?

question

Source

vosamoilenko

Most helpful comment

@gee-forr you need to set components: true in your nuxt.config.js.
Look at this: https://nuxtjs.org/guides/directory-structure/components#components-discovery

Also I used something like this in my *.stories.js

import CowButton from '@/components/TestButton/Button'

export default {
  title: 'TestButton',
  component: CowButton,
}

const TestButton = (args, { argTypes }) => ({
  components: { CowButton },
  template: '<CowButton />'
})

Electrofenster on 21 Aug 2020

🎉4 👍4

All 2 comments

I'm having the exact same problem. I even copied and pasted the Link example right out of the Usage docs and got the same error.

gee-forr on 20 Aug 2020

@gee-forr you need to set components: true in your nuxt.config.js.
Look at this: https://nuxtjs.org/guides/directory-structure/components#components-discovery

Also I used something like this in my *.stories.js

import CowButton from '@/components/TestButton/Button'

export default {
  title: 'TestButton',
  component: CowButton,
}

const TestButton = (args, { argTypes }) => ({
  components: { CowButton },
  template: '<CowButton />'
})

Electrofenster on 21 Aug 2020

🎉4 👍4

Was this page helpful?

0 / 5 - 0 ratings