Storybook is displaying everything in Show Code

As you can see from the screenshot below, it does work, as you would expect in Vue 2.

However, I'm getting the same results as you with Vue 3.

The simple answer

It's not implemented for Vue 3 yet.

As you can see in the source code of the docs add-on for Storybook,there is a separate implementation for the Vue 3 framework. However, the Vue 3 implementation lacks the source decorator, which generates a rendered version of the source code.

Hotfix

If you don't want to wait until the Storybook team has released an update, you can use the following code to generate your own docs, based on your arguments. Keep in mind that this does not cover all use cases.

const stringifyArguments = (key, value) => {    switch (typeof value) {    case 'string':        return `${key}="${value}"`;    case 'boolean':        return value ? key : '';    default:        return `:${key}="${value}"`;    }};const generateSource = (templateSource, args) => {    const stringifiedArguments = Object.keys(args)    .map((key) => stringifyArguments(key, args[key]))    .join(' ');    return templateSource.replace('v-bind="args"', stringifiedArguments);};const template = '<my-button v-bind="args" />';const Template = (args) => ({    components: { MyButton },    setup() {    return { args };    },    template,});export const Primary = Template.bind({});Primary.args = {    primary: true,    label: 'Button',};Primary.parameters = {    docs: {    source: { code: generateSource(template, Primary.args) },    },};

Another temporary solution is to manually write the source code, instead of having it automatically generated.

Primary.parameters = {  docs: {    source: { code: '<my-button primary label="Button" />' },  },};