Vue use 'addon-knobs' throw Error

[iswear1987]

Issue details

I just want add @storybook/addon-knobs/vue to storybook, but it not work, could you tell me how to use 'addon-knobs' for vue components please，thanks

It throw

Uncaught TypeError: Cannot read property 'emit' of undefined
at KnobManager.js:92

Steps to reproduce

// .storybook/addons.js

import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';
import '@storybook/addon-knobs/register';

// src/stories/index.js

import {storiesOf} from '@storybook/vue';
import { withKnobs, number } from '@storybook/addon-knobs/vue';
// ...
const stories = storiesOf('Storybook Knobs', module);
stories.addDecorator(withKnobs);
// ...
storiesOf('path/to/Component', module)
    .add('componentName', () => {
        const highlightTagId = number('highlightTagId', 64)
        // ...
    })

Storybook and other modules version

• @storybook/vue@3.3.12
• @storybook/addons@3.3.12
• vue@2.5.13

Affected platforms

• OS: fedora 27
• Browser: chrome 64.0.3282.140 (64bit)

Screenshots

[Flui]

Here you created two stories. But you missed to add the Knobs decorator to the second story.

// src/stories/index.js

import {storiesOf} from '@storybook/vue';
import { withKnobs, number } from '@storybook/addon-knobs/vue';
// ...
// first story (this is an empty story)
const stories = storiesOf('Storybook Knobs', module);
stories.addDecorator(withKnobs);
// ...
// second story
storiesOf('path/to/Component', module)
    .addDecorator(withKnobs) // TODO: this line should fix your error
    .add('componentName', () => {
        const highlightTagId = number('highlightTagId', 64)
        // ...
    })

[iswear1987]

@Flui thanks Flui, that did it :)