Storybook: Vue component as a function won't load without registering

[tomdohnal]

I tried to setup storybook for Vue according to the docs.

However, trying to render the component like this :arrow_down:

storiesOf('Button', module)
  .add('with text', () => '<my-button>with text</my-button>')

...didn't work out.

I had to manually register like this :arrow_down:

Vue.component('my-button', MyButton)

Is this the expected behavior or not? In the docs there is no such a thing as registering the component so it is kind of confusing to me. I'll be happy to update the docs if the problem is not on my side.

[shilman]

cc @backbone87

[backbone87]

yes this is expected behavior. nothing is done automagically in regards to component registration. so you need to make sure the component is available just like when you do normal components. the () => string overload is just a shortcut for () => ({ template: string }) so this component only knows about globally registered components. the alternative to global registration is: () => ({ components: { MyButton }, template: '<my-button>with text</my-button>' })

[tomdohnal]

Shall I then make a PR to the docs? And include this Vue.component('my-button', MyButton) in the example usage?

[backbone87]

ofc, go ahead

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[elevatebart]

Oh I might dig into this. Let me get an env ready.

[elevatebart]

Hey @tomdohnal
Did you know that the function expects to return ...

a Vue template OR a full vue component?

import Button from './Button.vue'

storiesOf('Button', module)
  .add('with text', () => ({
          components: { MyButton: Button},
          template: '<my-button>with text</my-button>'
  })

You can then register and test your components locally without having to globally register them.

[elevatebart]

Or you can even go wilder and use JSX. Note that the h parameter is important.

import Button from './Button.vue'

storiesOf('Button', module)
  .add('with text', () => ({
          render: h => <Button>hello</Button>,
  })

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!