storybook/code/renderers/vue3/template/stories/vue3-mdx.stories.mdx

import { global as globalThis } from '@storybook/global';
import { Meta, Story, Canvas } from '@storybook/addon-docs';

<Meta title="stories/renderers/vue3/vue3-mdx" />

# Vue3-specific MDX Stories

export const Button = globalThis.Components.Button;

export const Template = (args, { argTypes }) => ({
  components: { MyButton: Button },
  template: '<my-button v-bind="args" />',
  setup() {
    return { args };
  },
});

## Primary

<Canvas>
  <Story name="Primary">
    {{
      components: { MyButton: Button },
      template: '<my-button :primary="true" label="Primary button" />',
    }}
  </Story>
</Canvas>

## Secondary

<Canvas>
  <Story name="Secondary">
    {{
      components: { MyButton: Button },
      template: '<my-button :primary="false" label="Secondary button" />',
    }}
  </Story>
</Canvas>

## From template

<Canvas>
  <Story name="From Template" args={{ label: 'From template' }}>
    {Template.bind({})}
  </Story>
</Canvas>