docs: Add documentation to use Typescript with Vue 2/3 on Write Stories page

docs/snippets/vue/button-group-story.2.ts.mdx

@@ -0,0 +1,31 @@
+```ts
+//ButtonGroup.stories.ts
+
+import ButtonGroup from './ButtonGroup.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'ButtonGroup',
+  component: ButtonGroup,
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args, { argTypes }) => ({
+  components: { ButtonGroup },
+  props: Object.keys(argTypes),
+  template: '<ButtonGroup v-bind="$props" />',
+});
+
+export const Pair = Template.bind({});
+Pair.args = {
+  buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+  orientation: 'horizontal',
+};
+```

docs/snippets/vue/button-group-story.3.ts.mdx

@@ -0,0 +1,33 @@
+```ts
+//ButtonGroup.stories.ts
+
+import ButtonGroup from './ButtonGroup.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue3';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'ButtonGroup',
+  component: ButtonGroup,
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args) => ({
+  components: { ButtonGroup },
+  setup() {
+    return { args };
+  },
+  template: '<ButtonGroup v-bind="args" />',
+});
+
+export const Pair = Template.bind({});
+Pair.args = {
+  buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+  orientation: 'horizontal',
+};
+```

docs/snippets/vue/button-story-component-decorator.2.ts.mdx

@@ -0,0 +1,17 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { ComponentMeta } from '@storybook/vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
+} as ComponentMeta<typeof Button>;
+```

docs/snippets/vue/button-story-component-decorator.3.ts.mdx

@@ -0,0 +1,17 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { ComponentMeta } from '@storybook/vue3';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
+} as ComponentMeta<typeof Button>;
+```

docs/snippets/vue/button-story-default-export-with-component.2.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { ComponentMeta } from '@storybook/vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+```

docs/snippets/vue/button-story-default-export-with-component.3.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { ComponentMeta } from '@storybook/vue3';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+```

docs/snippets/vue/button-story-rename-story.2.ts.mdx

@@ -0,0 +1,22 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+export const Primary: ComponentStory<typeof Button> = () => ({
+  components: { Button },
+  template: '<Button primary label="Button" />',
+});
+Primary.storyName = 'I am the primary';
+```

docs/snippets/vue/button-story-rename-story.3.ts.mdx

@@ -0,0 +1,22 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue3';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+export const Primary: ComponentStory<typeof Button> = () => ({
+  components: { Button },
+  template: '<Button primary label="Button" />',
+});
+Primary.storyName = 'I am the primary';
+```

docs/snippets/vue/button-story-using-args.2.ts.mdx

@@ -0,0 +1,33 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof Button> = (args, { argTypes }) => ({
+  components: { Button },
+  props: Object.keys(argTypes),
+  template: '<Button v-bind="$props" />',
+});
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { background: '#ff0', label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```

docs/snippets/vue/button-story-using-args.3.ts.mdx

@@ -0,0 +1,35 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue3';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof Button> = (args) => ({
+  components: { Button },
+  setup() {
+    return { args };
+  },
+  template: '<Button v-bind="args" />',
+});
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { background: '#ff0', label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```

docs/snippets/vue/button-story-with-blue-args.2.ts.mdx

@@ -0,0 +1,26 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { ComponentMeta } from '@storybook/vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  //👇 Creates specific parameters for the story
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+} as ComponentMeta<typeof Button>;
+```

docs/snippets/vue/button-story-with-blue-args.3.ts.mdx

@@ -0,0 +1,26 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { ComponentMeta } from '@storybook/vue3';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  //👇 Creates specific parameters for the story
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+} as ComponentMeta<typeof Button>;
+```

docs/snippets/vue/button-story-with-emojis.2.ts.mdx

@@ -0,0 +1,31 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+export const Primary: ComponentStory<typeof Button> = () => ({
+  components: { Button },
+  template: '<Button background="#ff0" label="Button" />',
+});
+
+export const Secondary: ComponentStory<typeof Button> = () => ({
+  components: { Button },
+  template: '<Button background="#ff0" label="😄👍😍💯" />',
+});
+
+export const Tertiary: ComponentStory<typeof Button> = () => ({
+  components: { Button },
+  template: '<Button background="#ff0" label="📚📕📈🤓" />',
+});
+```

docs/snippets/vue/button-story-with-emojis.3.ts.mdx

@@ -0,0 +1,31 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue3';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+export const Primary: ComponentStory<typeof Button> = () => ({
+  components: { Button },
+  template: '<Button background="#ff0" label="Button" />',
+});
+
+export const Secondary: ComponentStory<typeof Button> = () => ({
+  components: { Button },
+  template: '<Button background="#ff0" label="😄👍😍💯" />',
+});
+
+export const Tertiary: ComponentStory<typeof Button> = () => ({
+  components: { Button },
+  template: '<Button background="#ff0" label="📚📕📈🤓" />',
+});
+```

docs/snippets/vue/button-story.2.ts.mdx

@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+export const Primary: ComponentStory<typeof Button> = () => ({
+  components: { Button },
+  template: '<Button primary label="Button" />',
+});
+```

docs/snippets/vue/button-story.3.ts.mdx

@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue3';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+export const Primary: ComponentStory<typeof Button> = () => ({
+  components: { Button },
+  template: '<Button primary label="Button" />',
+});
+```

docs/snippets/vue/list-story-expanded.2.ts.mdx

@@ -0,0 +1,41 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+} as ComponentMeta<typeof List>;
+
+export const Empty: ComponentStory<typeof List> = (args, { argTypes }) => ({
+  components: { List },
+  props: Object.keys(argTypes),
+  template: '<list v-bind="$props"/>',
+});
+
+export const OneItem: ComponentStory<typeof List> = (args, { argTypes }) => ({
+  components: { List, ListItem },
+  props: Object.keys(argTypes),
+  template: '<list v-bind="$props"><list-item/></list>',
+});
+
+export const ManyItems: ComponentStory<typeof List> = (args, { argTypes }) => ({
+  components: { List, ListItem },
+  props: Object.keys(argTypes),
+  template: `
+    <list v-bind="$props">
+      <list-item/>
+      <list-item/>
+      <list-item/>
+    </list>
+    `,
+});
+```

docs/snippets/vue/list-story-expanded.3.ts.mdx

@@ -0,0 +1,47 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue3';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+} as ComponentMeta<typeof List>;
+
+export const Empty: ComponentStory<typeof List> = (args) => ({
+  components: { List },
+  setup() {
+    return { args };
+  },
+  template: '<list v-bind="args"/>',
+});
+
+export const OneItem: ComponentStory<typeof List> = (args) => ({
+  components: { List, ListItem },
+  setup() {
+    return { args };
+  },
+  template: '<list v-bind="args"><list-item/></list>',
+});
+
+export const ManyItems: ComponentStory<typeof List> = (args) => ({
+  components: { List, ListItem },
+  setup() {
+    return { args };
+  },
+  template: `
+    <list v-bind="args">
+      <list-item/>
+      <list-item/>
+      <list-item/>
+    </list>
+    `,
+});
+```

docs/snippets/vue/list-story-reuse-data.2.ts.mdx

@@ -0,0 +1,36 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue';
+
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+} as ComponentMeta<typeof List>;
+
+export const ManyItems: ComponentStory<typeof List> = (args, { argTypes }) => ({
+  components: { List, ListItem },
+  props: Object.keys(argTypes),
+  template: `
+    <List v-bind="$props">
+      <list-item :isSelected="Selected"/>
+      <list-item :isSelected="Unselected"/>
+      <list-item :isSelected="Unselected"/>
+    </List>`,
+});
+
+ManyItems.args = {
+  Selected: Selected.args.isSelected,
+  Unselected: Unselected.args.isSelected,
+};
+```

docs/snippets/vue/list-story-reuse-data.3.ts.mdx

@@ -0,0 +1,38 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue3';
+
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+} as ComponentMeta<typeof List>;
+
+export const ManyItems: ComponentStory<typeof List> = (args) => ({
+  components: { List, ListItem },
+  setup() {
+    return { ...args };
+  },
+  template: `
+    <List v-bind="args">
+      <list-item :isSelected="Selected"/>
+      <list-item :isSelected="Unselected"/>
+      <list-item :isSelected="Unselected"/>
+    </List>`,
+});
+
+ManyItems.args = {
+  Selected: Selected.args.isSelected,
+  Unselected: Unselected.args.isSelected,
+};
+```

docs/snippets/vue/list-story-starter.2.ts.mdx

@@ -0,0 +1,23 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+} as ComponentMeta<typeof List>;
+
+// Always an empty list, not super interesting
+const Template: ComponentStory<typeof List> = (args, { argTypes }) => ({
+  components: { List },
+  props: Object.keys(argTypes),
+  template: '<list v-bind="$props"/>',
+});
+```

docs/snippets/vue/list-story-starter.3.ts.mdx

@@ -0,0 +1,25 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue3';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+} as ComponentMeta<typeof LoginForm>;
+
+// Always an empty list, not super interesting
+const Template: ComponentStory<typeof LoginForm> = (args) => ({
+  components: { List },
+  setup() {
+    return { args };
+  },
+  template: '<list v-bind="args"/>',
+});
+```

docs/snippets/vue/login-form-with-play-function.2.ts.mdx

@@ -0,0 +1,42 @@
+```ts
+// LoginForm.stories.ts
+
+import { userEvent, within } from '@storybook/testing-library';
+
+import LoginForm from './LoginForm.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Form',
+  component: LoginForm,
+} as ComponentMeta<typeof LoginForm>;
+
+export const Template: ComponentStory<typeof LoginForm> = (args, { argTypes }) => ({
+  components: { LoginForm },
+  props: Object.keys(argTypes),
+  template: `<LoginForm v-bind="$props" v-on="$props" />`,
+});
+
+export const EmptyForm = Template.bind({});
+
+export const FilledForm = Template.bind({});
+FilledForm.play = async ({ canvasElement }) => {
+  // Starts querying the component from its root element
+  const canvas = within(canvasElement);
+
+  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
+    delay: 100,
+  });
+  await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
+    delay: 100,
+  });
+
+  // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  await userEvent.click(canvas.getByRole('button'));
+};
+```

docs/snippets/vue/login-form-with-play-function.3.ts.mdx

@@ -0,0 +1,44 @@
+```js
+// LoginForm.stories.js
+
+import { userEvent, within } from '@storybook/testing-library';
+
+import LoginForm from './LoginForm.vue';
+
+import { ComponentMeta, ComponentStory } from '@storybook/vue3';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Form',
+  component: LoginForm,
+} as ComponentMeta<typeof LoginForm>;
+
+const Template: ComponentStory<typeof LoginForm> = (args) => ({
+  components: { LoginForm },
+  setup() {
+    return args;
+  },
+  template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
+});
+
+export const EmptyForm = Template.bind({});
+
+export const FilledForm = Template.bind({});
+FilledForm.play = async ({ canvasElement }) => {
+  // Starts querying the component from its root element
+  const canvas = within(canvasElement);
+
+  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
+    delay: 100,
+  });
+  await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
+    delay: 100,
+  });
+
+  // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  await userEvent.click(canvas.getByRole('button'));
+};
+```

docs/writing-stories/introduction.md

@@ -32,6 +32,8 @@ The _default_ export metadata controls how Storybook lists your stories and prov
     'react/button-story-default-export-with-component.js.mdx',
     'react/button-story-default-export-with-component.ts.mdx',
     'vue/button-story-default-export-with-component.js.mdx',
+    'vue/button-story-default-export-with-component.2.ts.mdx',
+    'vue/button-story-default-export-with-component.3.ts.mdx',
     'angular/button-story-default-export-with-component.ts.mdx',
     'svelte/button-story-default-export-with-component.js.mdx',
     'web-components/button-story-default-export-with-component.js.mdx',
@@ -51,6 +53,8 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
     'react/button-story.js.mdx',
     'react/button-story.ts.mdx',
     'vue/button-story.js.mdx',
+    'vue/button-story.2.ts.mdx',
+    'vue/button-story.3.ts.mdx',
     'angular/button-story.ts.mdx',
     'svelte/button-story.js.mdx',
     'svelte/button-story.native-format.mdx',
@@ -90,6 +94,8 @@ You can rename any particular story you need. For instance, to give it a more ac
     'react/button-story-rename-story.js.mdx',
     'react/button-story-rename-story.ts.mdx',
     'vue/button-story-rename-story.js.mdx',
+    'vue/button-story-rename-story.2.ts.mdx',
+    'vue/button-story-rename-story.3.ts.mdx',
     'angular/button-story-rename-story.ts.mdx',
     'svelte/button-story-rename-story.js.mdx',
     'web-components/button-story-rename-story.js.mdx',
@@ -112,6 +118,8 @@ A story is a function that describes how to render a component. You can have mul
     'react/button-story-with-emojis.ts.mdx',
     'react/button-story-with-emojis.mdx.mdx',
     'vue/button-story-with-emojis.js.mdx',
+    'vue/button-story-with-emojis.2.ts.mdx',
+    'vue/button-story-with-emojis.3.ts.mdx',
     'vue/button-story-with-emojis.mdx.mdx',
     'angular/button-story-with-emojis.ts.mdx',
     'angular/button-story-with-emojis.mdx.mdx',
@@ -138,6 +146,8 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
     'react/button-story-using-args.ts.mdx',
     'vue/button-story-using-args.2.js.mdx',
     'vue/button-story-using-args.3.js.mdx',
+    'vue/button-story-using-args.2.ts.mdx',
+    'vue/button-story-using-args.3.ts.mdx',
     'angular/button-story-using-args.ts.mdx',
     'svelte/button-story-using-args.js.mdx',
     'svelte/button-story-using-args.native-format.mdx',
@@ -166,6 +176,8 @@ What’s more, you can import `args` to reuse when writing stories for other com
     'angular/button-group-story.ts.mdx',
     'vue/button-group-story.2.js.mdx',
     'vue/button-group-story.3.js.mdx',
+    'vue/button-group-story.2.ts.mdx',
+    'vue/button-group-story.3.ts.mdx',
     'svelte/button-group-story.js.mdx',
     'web-components/button-group-story.js.mdx',
   ]}
@@ -207,8 +219,10 @@ Storybook's `play` function and the [`@storybook/addon-interactions`](/addons/@s
     'angular/login-form-with-play-function.ts.mdx',
     'angular/login-form-with-play-function.mdx.mdx',
     'vue/login-form-with-play-function.2.js.mdx',
+    'vue/login-form-with-play-function.2.ts.mdx',
     'vue/login-form-with-play-function.mdx-2.mdx',
     'vue/login-form-with-play-function.3.js.mdx',
+    'vue/login-form-with-play-function.3.ts.mdx',
     'vue/login-form-with-play-function.mdx-3.mdx',
     'svelte/login-form-with-play-function.js.mdx',
     'svelte/login-form-with-play-function.mdx.mdx',
@@ -231,6 +245,8 @@ For instance, suppose you wanted to test your Button component against a differe
     'react/button-story-with-blue-args.ts.mdx',
     'react/button-story-with-blue-args.mdx.mdx',
     'vue/button-story-with-blue-args.js.mdx',
+    'vue/button-story-with-blue-args.2.ts.mdx',
+    'vue/button-story-with-blue-args.3.ts.mdx',
     'vue/button-story-with-blue-args.mdx.mdx',
     'angular/button-story-with-blue-args.ts.mdx',
     'angular/button-story-with-blue-args.mdx.mdx',
@@ -261,6 +277,8 @@ A simple example is adding padding to a component’s stories. Accomplish this u
     'react/button-story-component-decorator.ts.mdx',
     'react/button-story-component-decorator.mdx.mdx',
     'vue/button-story-component-decorator.js.mdx',
+    'vue/button-story-component-decorator.2.ts.mdx',
+    'vue/button-story-component-decorator.3.ts.mdx',
     'vue/button-story-component-decorator.mdx.mdx',
     'angular/button-story-component-decorator.ts.mdx',
     'angular/button-story-component-decorator.mdx.mdx',
@@ -287,7 +305,9 @@ When building design systems or component libraries, you may have two or more co
     'react/list-story-starter.ts.mdx',
     'angular/list-story-starter.ts.mdx',
     'vue/list-story-starter.2.js.mdx',
+    'vue/list-story-starter.2.ts.mdx',
     'vue/list-story-starter.3.js.mdx',
+    'vue/list-story-starter.3.ts.mdx',
     'svelte/list-story-starter.native-format.mdx',
     'web-components/list-story-starter.js.mdx',
   ]}
@@ -305,7 +325,9 @@ In such cases, it makes sense to render a different function for each story:
     'react/list-story-expanded.ts.mdx',
     'angular/list-story-expanded.ts.mdx',
     'vue/list-story-expanded.2.js.mdx',
+    'vue/list-story-expanded.2.ts.mdx',
     'vue/list-story-expanded.3.js.mdx',
+    'vue/list-story-expanded.3.ts.mdx',
     'svelte/list-story-expanded.native-format.mdx',
     'web-components/list-story-expanded.js.mdx',
   ]}
@@ -323,7 +345,9 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
     'react/list-story-reuse-data.ts.mdx',
     'angular/list-story-reuse-data.ts.mdx',
     'vue/list-story-reuse-data.2.js.mdx',
+    'vue/list-story-reuse-data.2.ts.mdx',
     'vue/list-story-reuse-data.3.js.mdx',
+    'vue/list-story-reuse-data.3.ts.mdx',
     'web-components/list-story-reuse-data.js.mdx',
   ]}
 />
@@ -334,4 +358,4 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
 
 💡 Note that there are disadvantages in writing stories like this as you cannot take full advantage of the args mechanism and composing args as you build even more complex composite components. For more discussion, see the [multi component stories](../writing-stories/stories-for-multiple-components.md) workflow documentation.
 
-</div>
+</div>