Vue: Improve code snippets

[larsrickert]

Is your feature request related to a problem? Please describe.

We are using Storybook to document our Vue component library. Its very useful the the code snippets are automatically generated so the user can copy it to his project.

However, we would like to have more modern code snippets that better follow common Vue best practices / are closer to the code that the user would actually use in his project. This includes:

• use @ shorthand for events instead of v-on:
• use shorthand for true boolean props
• move array/object values to <script>

Describe the solution you'd like

I can implement the change but I want to clarify/discuss first if this feature request is also a desired change on your side.

Example:

Current snippet:

<template>
  <MyComponent
    :value="{ foo: 42, bar: 'baz' }"
    :disabled="true"
    v-on:some-event="() => ({})"
  />
</template>

My suggestion:

<script lang="ts" setup>
const value = { foo: 42, bar: "baz" };
</script>

<template>
  <MyComponent :value="value" disabled @some-event="() => ({})" />
</template>

Also I'd like to have a Code tab added when viewing a single story. Currently the source code is only available on the "Docs" page. Example:

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

The feature could be implemented as opt-in framework option for Storybook 8 and can be changed to be the default in Storybook 9 so we don't introduce possible breaking changes for projects using custom code snippet transformers.

[larsrickert]

@kasperpeulen @chakAs3 Would love your opinion on this :)

[kasperpeulen]

This looks great to me.
Tagging @ruphin as he also had some ideas here I belief.

[ruphin]

Looks good, the more idiomatic Vue code it produces the better.

In general, any improvement to the example "code" for Vue is quite welcome, as it tends to not be very copy-paste friendly at the moment.

[chakAs3]

It is good initiative it was in my backlog, thanks again @larsrickert , and for copy-paste friendly as @ruphin i have tried my best however i was waiting for users feedback but at least i claim that when you copy past the code it works still for idiomatic code i agree we should discuss this for example :
when you write a story using v-bind your story code

export const Overview = {
  args: { size:'medium' , color:'red' },
  render: (args: any) => ({
    setup: () => {
      return { args }
    },
    template: ` <v-btn v-bind="args">Button</v-btn>`
  })
}

so you have to know there is difference between Story source which is normally shows on the tab and the generated template that you can copy past in your Vue app in this case the previous code is the Story source the following code is to options both of them should work

Option 1

<template>
    <v-btn v-bind="{ size:'medium' , color:'red' }">Button</v-btn>
</template>

or Option 2

<template>
   <v-btn  size="medium" color="red" >Button</v-btn>
</template>

Option 1: translates what you have really use which is v-bind
Option 2: more idiomatic Vue code that you usually find or use

There is even one more option is using dynamic ref so you will have a script tag + template tag: this option is available if you pass an additional tag to parameters

<script>
   const size = ref('medium')
   const color = ref('red')
</script>
<template>
   <v-btn  :size="size" :color="color" >Button</v-btn>
</template>

[larsrickert]

Thanks for the explanation :) I think a combination between Option 2 and 3 is what we should aim for.
So use regular props like size="medium" for primitive types but move non-primitive types like objects, arrays and functions to the <script> section.

[chakAs3]

Also I'd like to have a Code tab added when viewing a single story. Currently the source code is only available on the "Docs" page.

Point 1: There's this addon called Storysource, but it's aimed at displaying the source code of the story, not the generated code.

Point 2: Bringing in this feature wouldn't just be a win for Vue users; it'd be a big deal for folks using other frameworks too. I reckon a bunch of users would really appreciate having this in their toolkit.

Point 3: This feature was actually what drove me to start contributing in the first place. It's what got me hooked, and now I'm the one maintaining it. happy to have @larsrickert joining me on same path.

[larsrickert]

I will close this because #27194 and #29253 are already implemented and merged 🎉