Dynamic source rendering for Vue

[shilman]

Follow-up to #11332 but for Vue

[i-void]

First of all, thank you for your efforts. You are doing great work. It would be very good to see this feature in production. Just wanted to say. Also I need to say showing source is not properly work in Vue when using standard npx sb init. All story sources are showing this code for button example:

(args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { MyButton },
  template: '<my-button @onClick="onClick" v-bind="$props" />',
})

[zackkrida]

Dynamic behavior aside, Storybook doesn't display the correct source for Vue components at all, correct?

This is the output I get:

[shilman]

@zackkrida that's the source code of the story, which is the intended behavior

[zackkrida]

@shilman Apologies if I came off as rude in any way—I understand that's the 'source', as written.

It's probably also an impossible or difficult problem, but I'm just referring to the idea that the source of a Vue component would reflect what folks would write in user land as consumers of a component library.

[shilman]

@zackkrida No offense taken. As we've evolved storybook the story source is getting more abstracted/efficient (e.g. auto-generated controls), but further away from what you'd write in an app. This issue exists both to show the dynamically updated arg values and also render the component usage in a more natural way. Let's see what we can do!

[richardhuf84]

Just adding a +1 here. WOuld love to see those Vue code snippes resemble the Vue source if possible.

[shilman]

@richardhuf84 please add a 👍 to the original issue description. that's the most direct way to help us prioritize.

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.27 containing PR #12812 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[richardhuf84]

Thanks @shilman

I've updated to 6.1.0 alpha, and can confirm that the code snippets look correct for Vue. Thanks alot for your work, and being so responsive.

[shilman]

All credit goes to @pocka who saved the day on this one. 🎉