Storybook: How to add knobs for vue components in 6.0?

Created on 25 Nov 2020 · 1Comment · Source: storybookjs/storybook

Hi. I've got absolutely no idea hot to make knobs work reactively. Haven't found any examples on web either.

Here's my code:

import ElBtn from '../components/elements/buttons/el-btn.vue';

export default {
    title: 'El-Btn',
    component: ElBtn,
    decorators: [() => `<section class="container"><story /></section>`],
    argTypes: {
        type: { control: { type: 'select', options: ['secondary', 'primary'] } },
        round: { control: { type: 'boolean', default: false } },
    },
};

export const primary = () => ({
    components: { ElBtn },
    template: `<el-btn>Text</el-btn>`,
});

export const secondary = () => ({
    props: {
        type: { control: { type: 'select', options: ['secondary', 'primary'] } },
    },
    render() {
        return <ElBtn type="this.type">Test</ElBtn>;
    },
});

Added via Vue CLI 4.5.0 (vue add storybook).

Relevant dev dependencies:

    "@storybook/addon-essentials": "^6.0.26",
    "@storybook/addon-links": "^6.0.26",
    "@storybook/vue": "^6.0.26",

Both controls on both stories appear, but none of them changes actual props.

Also, would be grateful for any opensource storybook 6.0 examples with vue or any relevant guides.

PN controls vue question / support

Source

Kezhich

Most helpful comment

export const primary = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { ElBtn },
    // v-bind by itself takes every key in the value and v-binds them to a field on this component
    // $props is every prop on the `primary` component
    template: `<el-btn v-bind="$props">Text</el-btn>`,
});

for secondary you can follow this layout for the props too.

se here for more
https://storybook.js.org/docs/vue/writing-stories/args#story-args

HIMISOCOOL on 26 Nov 2020

❤2

>All comments

export const primary = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { ElBtn },
    // v-bind by itself takes every key in the value and v-binds them to a field on this component
    // $props is every prop on the `primary` component
    template: `<el-btn v-bind="$props">Text</el-btn>`,
});

for secondary you can follow this layout for the props too.

se here for more
https://storybook.js.org/docs/vue/writing-stories/args#story-args

HIMISOCOOL on 26 Nov 2020

❤2

Was this page helpful?

0 / 5 - 0 ratings