How to add knobs for vue components in 6.0?

[Kezhich]

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.

[HIMISOCOOL]

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

[stale]

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!

[ndelangen]

I recommend looking into controls:
https://storybook.js.org/docs/react/essentials/controls#page-top