diff --git a/docs/snippets/vue/button-component-with-proptypes.2.mdx b/docs/snippets/vue/button-component-with-proptypes.2.js.mdx
similarity index 100%
rename from docs/snippets/vue/button-component-with-proptypes.2.mdx
rename to docs/snippets/vue/button-component-with-proptypes.2.js.mdx
diff --git a/docs/snippets/vue/button-component-with-proptypes.3.mdx b/docs/snippets/vue/button-component-with-proptypes.3.js.mdx
similarity index 100%
rename from docs/snippets/vue/button-component-with-proptypes.3.mdx
rename to docs/snippets/vue/button-component-with-proptypes.3.js.mdx
diff --git a/docs/snippets/vue/button-implementation.2.mdx b/docs/snippets/vue/button-implementation.2.js.mdx
similarity index 100%
rename from docs/snippets/vue/button-implementation.2.mdx
rename to docs/snippets/vue/button-implementation.2.js.mdx
diff --git a/docs/snippets/vue/button-implementation.3.mdx b/docs/snippets/vue/button-implementation.3.js.mdx
similarity index 100%
rename from docs/snippets/vue/button-implementation.3.mdx
rename to docs/snippets/vue/button-implementation.3.js.mdx
diff --git a/docs/snippets/vue/simple-page-implementation.2.mdx b/docs/snippets/vue/simple-page-implementation.2.js.mdx
similarity index 100%
rename from docs/snippets/vue/simple-page-implementation.2.mdx
rename to docs/snippets/vue/simple-page-implementation.2.js.mdx
diff --git a/docs/snippets/vue/simple-page-implementation.3.mdx b/docs/snippets/vue/simple-page-implementation.3.js.mdx
similarity index 100%
rename from docs/snippets/vue/simple-page-implementation.3.mdx
rename to docs/snippets/vue/simple-page-implementation.3.js.mdx
diff --git a/docs/writing-docs/doc-block-argstable.md b/docs/writing-docs/doc-block-argstable.md
index 62680fccedc..f541c781964 100644
--- a/docs/writing-docs/doc-block-argstable.md
+++ b/docs/writing-docs/doc-block-argstable.md
@@ -20,8 +20,8 @@ This is extremely useful, but it can be further expanded. Additional information
     'react/button-component-with-proptypes.js.mdx',
     'react/button-component-with-proptypes.ts.mdx',
     'angular/button-component-with-proptypes.ts.mdx',
-    'vue/button-component-with-proptypes.2.mdx',
-    'vue/button-component-with-proptypes.3.mdx',
+    'vue/button-component-with-proptypes.2.js.mdx',
+    'vue/button-component-with-proptypes.3.js.mdx',
     'svelte/button-component-with-proptypes.js.mdx',
     'web-components/button-component-with-proptypes.js.mdx',
     'web-components/button-component-with-proptypes.ts.mdx',
@@ -125,8 +125,8 @@ You can also extend the ArgsTable's customization by grouping related `argTypes`
     'react/button-implementation.js.mdx',
     'react/button-implementation.ts.mdx',
     'angular/button-implementation.ts.mdx',
-    'vue/button-implementation.2.mdx',
-    'vue/button-implementation.3.mdx',
+    'vue/button-implementation.2.js.mdx',
+    'vue/button-implementation.3.js.mdx',
     'svelte/button-implementation.js.mdx',
     'web-components/button-implementation.js.mdx',
     'web-components/button-implementation.ts.mdx',
diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
index 5c354722310..151090460c5 100644
--- a/docs/writing-stories/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -38,8 +38,8 @@ When you are building screens in this way, it is typical that the inputs of a co
   paths={[
     'react/simple-page-implementation.js.mdx',
     'react/simple-page-implementation.ts.mdx',
-    'vue/simple-page-implementation.2.mdx',
-    'vue/simple-page-implementation.3.mdx',
+    'vue/simple-page-implementation.2.js.mdx',
+    'vue/simple-page-implementation.3.js.mdx',
     'angular/simple-page-implementation.ts.mdx',
     'svelte/simple-page-implementation.js',
   ]}