diff --git a/docs/snippets/vue/page-story-slots.2.js.mdx b/docs/snippets/vue/page-story-slots.2.js.mdx
index d728cd1f48a..ff119043c28 100644
--- a/docs/snippets/vue/page-story-slots.2.js.mdx
+++ b/docs/snippets/vue/page-story-slots.2.js.mdx
@@ -17,7 +17,9 @@ const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   template: `
     <page v-bind="$props">
-      <footer v-if="footer" v-slot=footer v-html="footer"/>
+      <template v-slot:footer>
+        <footer v-if="footer" v-html="footer"/>
+      </template>
     </page>
   `,
 });
diff --git a/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx b/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx
index 1f4e86e63fe..b6ce77d8a2f 100644
--- a/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx
@@ -12,7 +12,9 @@ export const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   template: `
     <page v-bind="$props">
-      <footer v-if="footer" v-slot=footer v-html="footer"/>
+      <template v-slot:footer>
+        <footer v-if="footer" v-html="footer"/>
+      </template>
     </page>
   `,
 });