diff --git a/docs/snippets/vue/button-story-with-args.js.mdx b/docs/snippets/vue/button-story-with-args.js.mdx
new file mode 100644
index 00000000000..3a8817f8cec
--- /dev/null
+++ b/docs/snippets/vue/button-story-with-args.js.mdx
@@ -0,0 +1,21 @@
+```js
+// Button.stories.js
+
+import Button from './Button';
+
+export default { title: 'Components/Button' };
+
+// We create a “template” of how args map to rendering
+const Template = (args, { argTypes }) => ({
+  components: { Button },
+  props: Object.keys(argTypes),
+  template: '<Button :primary="primary" :label="label" />',
+});
+
+// Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Primary',
+};
+```
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 553f1c112bb..dc940f05162 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -22,6 +22,7 @@ To define the args of a single story, use the `args` CSF story key:
   paths={[
     'react/button-story-with-args.js.mdx',
     'react/button-story-with-args.ts.mdx',
+    'vue/button-story-with-args.js.mdx',
     'angular/button-story-with-args.ts.mdx',
   ]}
 />