Storybook: How do you pass args to Veutify component story?

[dankellett]

I'm trying to add Vuetify components as Storybook stories in a Nuxt project and pass Storybook args. This Github repo has a great example, but doesn't illustrate how to pass args to the Vuetify component (link).

When I try the following syntax I get Vue console errors stating that the properties aren't reactive.

export const SelectArgs = ({ label, items }) =>
  '<v-app><v-select "label="label" :items="items" ></v-select></v-app>'
SelectArgs.args = { items: ['Foo', 'Bar', 'Fizz', 'Buzz'], label: 'standard' }

Is there a supported method to pass arguments through to Vueitify components like this?

[dankellett]

Here is an example sandbox.

https://codesandbox.io/s/ancient-butterfly-zptfi?file=/components/Select.stories.js

[farnabaz]

Define props for your story:

export const SelectArgs = ({ label, items }) => ({
    props: ['items', 'label'],
    template: '<v-app><v-select "label="label" :items="items" ></v-select></v-app>'
});
SelectArgs.args = { items: ['Foo', 'Bar', 'Fizz', 'Buzz'], label: 'standard' }

[dankellett]

@farnabaz that's the syntax. Thank you.

Demo repo for folks that stumble upon this.
https://github.com/dankellett/clean-nuxt-storybook-vuetify