Storybook: vue storybook install fails

[Maxhodges]

The example yields

Failed to execute 'createElement' on 'Document': The tag name provided ('<my-button :rounded="true">story as a function template</my-button>') is not a valid name.

      Error: Failed to execute 'createElement' on 'Document': The tag name provided ('<my-button :rounded="true">story as a function template</my-button>') is not a valid name.

[Maxhodges]

another user is reporting the same issue on discord

10/20/2017
I still get an error in a story file like this:

import { storiesOf } from '@storybook/vue';
import Checkbox from './Checkbox.vue';

storiesOf('Checkbox', module)
  .add('Default checkbox', () => '<bb-checkbox></bb-checkbox>')

Error: Failed to execute 'createElement' on 'Document': The tag name provided ('<bb-checkbox></bb-checkbox>') is not a valid name.
    at HTMLDocument.createElement (<anonymous>:1:1545)
    at Object.isUnknownElement (http://localhost:9009/static/preview.bundle.js:6812:21)
    at createElm (http://localhost:9009/static/preview.bundle.js:7079:18)
    at createChildren (http://localhost:9009/static/preview.bundle.js:7191:9)
    at createElm (http://localhost:9009/static/preview.bundle.js:7096:9)
    at Vue$3.patch [as __patch__] (http://localhost:9009/static/preview.bundle.js:7610:9)
    at Vue$3.Vue._update (http://localhost:9009/static/preview.bundle.js:4257:19)
    at Vue$3.updateComponent (http://localhost:9009/static/preview.bundle.js:4385:10)
    at Watcher.get (http://localhost:9009/static/preview.bundle.js:4728:25)
    at new Watcher (http://localhost:9009/static/preview.bundle.js:4717:12)

[DaxChen]

Got the same error,

From the example:

storiesOf('MyButton', module)
  .add('story as a template', () => '<my-button :rounded="true">story as a function template</my-button>')
  .add('story as a component', () => ({
    components: { MyButton },
    template: '<my-button :rounded="true">rounded</my-button>'
  }));

If I comment out the first story 'story as a template', and only use my components like the second story 'story as a component', it works.
(I did register my component globally in .storybook/config.js)

Is stories as template really supported for vue components?

And if I change the first one to:

storiesOf('MyButton', module)
  .add('story as a ???', () => ({
    template: '<my-button :rounded="true">story as a function template</my-button>'
  }),
  .add('story as a component', () => ({
    components: { MyButton },
    template: '<my-button :rounded="true">rounded</my-button>'
  }));

The error is gone, but globally registered components are not detected, so will get:

[Vue warn]: Unknown custom element: <my-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Anonymous>
       <Root>

[andreasvirkus]

I was the person reporting the same issue on Discord (Oct 20th) and what worked for me eventually was switching from this:

import { storiesOf } from '@storybook/vue';
import Checkbox from './Checkbox.vue';

storiesOf('Checkbox', module)
  .add('Default checkbox', () => '<bb-checkbox></bb-checkbox>')

To this:

import { storiesOf } from '@storybook/vue';
import Checkbox from './Checkbox.vue';

storiesOf('Checkbox', module)
  .add('Default checkbox', () => ({
    template: `<bb-checkbox :label="'Checkbox label'"></bb-checkbox>`,
  }));

[Maxhodges]

@Hypnosphi I think it should be labeled bug or as a mistake in the documentation?

[Maxhodges]

I also got my working per @andreasvirkus's approach

  .add(
    "no good",
    () => '<my-button :rounded="true">story as a function template1</my-button>'
  )

  .add("good", () => ({
    template: `<my-button :rounded="true">story as a function template2</my-button>`
  }))

[ndelangen]

I can see how the string only option would be a nice syntax to use, and would be happy to label this as a bug. This should be fairly easy to fix tbh, anyone here wants to do it?

[code4cake]

@ndelangen I would like to take it :)

[ndelangen]

@dantesolis That would be seriously amazing! Do you need any help from me to open a PR?

[ndelangen]

I THINK it should be as simple as replacing:
https://github.com/storybooks/storybook/blob/master/app/vue/src/client/preview/render.js#L78-L80

with:

let component = story ? story(context) : NoPreview;

if (typeof component === 'string') {
  component = { template: component };
}

[code4cake]

@ndelangen sorry for the delay, I've been on holiday, yes I will still like to work on this if possible

[ndelangen]

Welcome back, I hope you had a nice holiday! I'm available for some assistance if required. Contact me on Storybook slack

[chovy]

still happening for me. did anyone ever commit a fix?

[phmngocnghia]

+1

[ndelangen]

Can I reproduce this somewhere?

[ndelangen]

The above mentioned addition wasn't made to code, The docs got fixed up so now we only mention:

  .add("good", () => ({
    template: `<my-button :rounded="true">story as a function template2</my-button>`
  }))

Still happy to merge a PR adding this:

if (typeof component === 'string') {
  component = { template: component };
}

Or some other solution that would allow the example code that created this issue.

Anyone interested in creating that PR?