storybook: vue storybook install fails

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>

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>`
  }))

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 };
}

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>`,
  }));