From 697cf088696187d463dbfc7f9f9a16fa7853b58b Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Wed, 27 Dec 2023 20:47:00 +0000
Subject: [PATCH 1/3] Docs: Remove Vue 2 from documentation

---
 README.md                                     |  2 +-
 code/addons/controls/README.md                |  2 -
 code/addons/docs/README.md                    |  4 +-
 code/addons/docs/common/README.md             |  2 +-
 code/addons/docs/docs/docspage.md             |  2 +-
 code/addons/docs/docs/faq.md                  |  4 +-
 code/addons/docs/docs/mdx.md                  |  2 +-
 code/addons/docs/docs/multiframework.md       |  4 +-
 code/addons/docs/docs/props-tables.md         |  6 +-
 code/addons/docs/docs/recipes.md              |  2 +-
 code/addons/docs/docs/theming.md              |  2 +-
 code/addons/toolbars/README.md                |  2 +-
 code/builders/builder-vite/README.md          |  4 +-
 code/frameworks/vue3-vite/README.md           |  4 +-
 code/frameworks/vue3-webpack5/README.md       |  4 +-
 code/lib/core-server/README.md                |  2 +-
 code/lib/preview-api/README-core-client.md    |  2 +-
 code/presets/vue3-webpack/README.md           |  4 +-
 docs/api/arg-types.md                         |  2 +-
 docs/api/csf.md                               | 10 ---
 docs/builders/vite.md                         |  2 +-
 docs/configure/frameworks-feature-support.md  | 90 +++++++++----------
 docs/configure/frameworks.md                  |  8 +-
 docs/configure/images-and-assets.md           |  2 -
 docs/configure/telemetry.md                   |  4 +-
 docs/configure/upgrading.md                   | 22 +++++
 docs/contribute/code.md                       |  2 +-
 docs/contribute/framework.md                  |  2 +-
 docs/contribute/new-snippets.md               |  4 +-
 docs/essentials/controls.md                   |  2 -
 docs/faq.md                                   | 18 +++-
 docs/get-started/install.md                   | 23 ++++-
 docs/get-started/setup.md                     |  8 --
 docs/get-started/whats-a-story.md             |  2 -
 docs/get-started/why-storybook.md             |  4 +-
 .../init-command-specific-version.npx.js.mdx  |  3 +
 .../init-command-specific-version.pnpm.js.mdx |  3 +
 .../init-command-specific-version.yarn.js.mdx |  3 +
 ...pgrade-command-specific-version.npx.js.mdx |  3 +
 ...grade-command-specific-version.pnpm.js.mdx |  3 +
 ...grade-command-specific-version.yarn.js.mdx |  3 +
 .../vue/addon-highlight-reset.ts-4-9.mdx      |  1 -
 .../snippets/vue/addon-highlight-reset.ts.mdx |  1 -
 .../button-component-with-proptypes.2.js.mdx  | 31 -------
 .../button-component-with-proptypes.2.ts.mdx  | 30 -------
 docs/snippets/vue/button-group-story.2.js.mdx | 29 ------
 .../vue/button-group-story.2.ts-4-9.mdx       | 29 ------
 docs/snippets/vue/button-group-story.2.ts.mdx | 29 ------
 .../vue/button-implementation.2.js.mdx        | 53 -----------
 .../vue/button-implementation.2.ts.mdx        | 54 -----------
 .../vue/button-story-auto-docs.ts.mdx         |  1 -
 .../button-story-click-handler-args.2.js.mdx  | 23 -----
 ...tton-story-click-handler-args.2.ts-4-9.mdx | 28 ------
 .../button-story-click-handler-args.2.ts.mdx  | 28 ------
 ...n-story-click-handler-simplificated.js.mdx |  8 +-
 ...ory-click-handler-simplificated.ts-4-9.mdx |  8 +-
 ...n-story-click-handler-simplificated.ts.mdx |  8 +-
 .../vue/button-story-click-handler.2.js.mdx   | 21 -----
 .../button-story-click-handler.2.ts-4-9.mdx   | 26 ------
 .../vue/button-story-click-handler.2.ts.mdx   | 26 ------
 ...on-story-component-args-primary.ts-4-9.mdx |  1 -
 ...button-story-component-args-primary.ts.mdx |  1 -
 ...utton-story-component-decorator.ts-4-9.mdx |  1 -
 .../button-story-component-decorator.ts.mdx   |  1 -
 .../vue/button-story-decorator.ts-4-9.mdx     |  1 -
 .../vue/button-story-decorator.ts.mdx         |  1 -
 ...y-default-export-with-component.ts-4-9.mdx |  1 -
 ...story-default-export-with-component.ts.mdx |  1 -
 .../vue/button-story-rename-story.ts-4-9.mdx  |  1 -
 .../vue/button-story-rename-story.ts.mdx      |  1 -
 .../vue/button-story-using-args.2.js.mdx      | 50 -----------
 .../vue/button-story-using-args.2.ts-4-9.mdx  | 55 ------------
 .../vue/button-story-using-args.2.ts.mdx      | 55 ------------
 ...button-story-with-addon-example.ts-4-9.mdx |  1 -
 .../button-story-with-addon-example.ts.mdx    |  1 -
 .../vue/button-story-with-args.2.js.mdx       | 26 ------
 .../vue/button-story-with-args.2.ts-4-9.mdx   | 31 -------
 .../vue/button-story-with-args.2.ts.mdx       | 31 -------
 .../button-story-with-blue-args.ts-4-9.mdx    |  1 -
 .../vue/button-story-with-blue-args.ts.mdx    |  1 -
 .../vue/button-story-with-emojis.ts-4-9.mdx   |  1 -
 .../vue/button-story-with-emojis.ts.mdx       |  1 -
 docs/snippets/vue/button-story.ts-4-9.mdx     |  1 -
 docs/snippets/vue/button-story.ts.mdx         |  1 -
 .../component-story-figma-integration.js.mdx  |  4 -
 ...mponent-story-figma-integration.ts-4-9.mdx |  5 --
 .../component-story-figma-integration.ts.mdx  |  5 --
 ...component-story-highlight-addon.ts-4-9.mdx |  1 -
 .../component-story-highlight-addon.ts.mdx    |  1 -
 ...omponent-story-static-asset-cdn.ts-4-9.mdx |  1 -
 .../component-story-static-asset-cdn.ts.mdx   |  1 -
 ...nt-story-static-asset-with-import.2.js.mdx | 30 -------
 ...tory-static-asset-with-import.2.ts-4-9.mdx | 34 -------
 ...nt-story-static-asset-with-import.2.ts.mdx | 35 --------
 ...ory-static-asset-without-import.ts-4-9.mdx |  1 -
 ...t-story-static-asset-without-import.ts.mdx |  1 -
 ...omponent-story-with-accessibility.2.js.mdx | 38 --------
 ...nent-story-with-accessibility.2.ts-4-9.mdx | 42 ---------
 ...omponent-story-with-accessibility.2.ts.mdx | 42 ---------
 ...omponent-story-with-accessibility.3.js.mdx | 14 ---
 ...nent-story-with-accessibility.3.ts-4-9.mdx | 14 ---
 ...ory-with-custom-render-function.ts-4-9.mdx |  1 -
 ...t-story-with-custom-render-function.ts.mdx |  1 -
 .../vue/csf-2-example-starter.2.js.mdx        | 17 ----
 .../vue/csf-2-example-starter.2.ts.mdx        | 19 ----
 .../snippets/vue/csf-2-example-story.2.js.mdx | 10 ---
 .../snippets/vue/csf-2-example-story.2.ts.mdx | 10 ---
 .../vue/csf-3-example-render.2.js.mdx         | 12 ---
 .../vue/csf-3-example-render.2.ts.mdx         | 12 ---
 .../highlight-addon-custom-style.ts-4-9.mdx   |  1 -
 .../vue/highlight-addon-custom-style.ts.mdx   |  1 -
 docs/snippets/vue/histogram-story.2.js.mdx    | 28 ------
 .../snippets/vue/histogram-story.2.ts-4-9.mdx | 33 -------
 docs/snippets/vue/histogram-story.2.ts.mdx    | 33 -------
 .../vue/list-story-expanded.ts-4-9.mdx        |  1 -
 docs/snippets/vue/list-story-expanded.ts.mdx  |  1 -
 .../vue/list-story-reuse-data.2.js.mdx        | 35 --------
 .../vue/list-story-reuse-data.2.ts-4-9.mdx    | 40 ---------
 .../vue/list-story-reuse-data.2.ts.mdx        | 40 ---------
 .../vue/list-story-starter.ts-4-9.mdx         |  5 +-
 docs/snippets/vue/list-story-starter.ts.mdx   |  1 -
 .../snippets/vue/list-story-template.2.js.mdx | 49 ----------
 .../vue/list-story-template.2.ts-4-9.mdx      | 56 ------------
 .../snippets/vue/list-story-template.2.ts.mdx | 56 ------------
 .../vue/list-story-unchecked.2.js.mdx         | 33 -------
 .../vue/list-story-unchecked.2.ts-4-9.mdx     | 39 --------
 .../vue/list-story-unchecked.2.ts.mdx         | 39 --------
 .../login-form-with-play-function.ts-4-9.mdx  |  1 -
 .../vue/login-form-with-play-function.ts.mdx  |  1 -
 ...component-story-basic-and-props.ts-4-9.mdx |  1 -
 .../my-component-story-basic-and-props.ts.mdx |  1 -
 ...component-story-configure-viewports.js.mdx |  4 -
 ...onent-story-configure-viewports.ts-4-9.mdx |  5 --
 ...component-story-configure-viewports.ts.mdx |  5 --
 ...-component-story-use-globaltype.ts-4-9.mdx |  1 -
 .../my-component-story-use-globaltype.ts.mdx  |  1 -
 ...y-component-story-with-nonstory.ts-4-9.mdx |  1 -
 .../my-component-story-with-nonstory.ts.mdx   |  1 -
 docs/snippets/vue/page-story-slots.2.js.mdx   | 26 ------
 .../vue/page-story-slots.2.ts-4-9.mdx         | 35 --------
 docs/snippets/vue/page-story-slots.2.ts.mdx   | 35 --------
 docs/snippets/vue/page-story.2.-ts-4-9.mdx    | 33 -------
 docs/snippets/vue/page-story.2.js.mdx         | 28 ------
 docs/snippets/vue/page-story.2.ts.mdx         | 33 -------
 .../vue/simple-page-implementation.2.js.mdx   | 39 --------
 .../vue/storybook-addon-a11y-disable.js.mdx   |  4 -
 .../storybook-addon-a11y-disable.ts-4-9.mdx   |  5 --
 .../vue/storybook-addon-a11y-disable.ts.mdx   |  5 --
 .../storybook-addon-a11y-story-config.js.mdx  |  4 -
 ...orybook-addon-a11y-story-config.ts-4-9.mdx |  5 --
 .../storybook-addon-a11y-story-config.ts.mdx  |  5 --
 .../storybook-preview-global-decorator.ts.mdx |  1 -
 ...hoc-component-decorator.component-2.js.mdx | 23 -----
 ...hoc-component-decorator.component-2.ts.mdx | 27 ------
 ...ew-with-library-decorator.library-2.js.mdx | 19 ----
 ...ew-with-library-decorator.library-2.ts.mdx | 23 -----
 ...review-with-mixin-decorator.mixin-2.js.mdx | 19 ----
 ...review-with-mixin-decorator.mixin-2.ts.mdx | 23 -----
 ...ook-testing-addon-optional-config.2.js.mdx | 10 ---
 .../your-component-with-decorator.ts-4-9.mdx  |  1 -
 .../vue/your-component-with-decorator.ts.mdx  |  1 -
 docs/snippets/vue/your-component.2.js.mdx     | 26 ------
 docs/snippets/vue/your-component.2.ts-4-9.mdx | 31 -------
 docs/snippets/vue/your-component.2.ts.mdx     | 31 -------
 docs/writing-stories/args.md                  |  6 --
 .../build-pages-with-storybook.md             |  1 -
 docs/writing-stories/decorators.md            |  8 +-
 docs/writing-stories/index.md                 |  6 --
 .../stories-for-multiple-components.md        |  4 -
 docs/writing-stories/typescript.md            |  7 +-
 docs/writing-tests/accessibility-testing.md   |  2 -
 .../storyshots-migration-guide.md             |  2 +-
 docs/writing-tests/test-coverage.md           |  2 +-
 173 files changed, 169 insertions(+), 2202 deletions(-)
 create mode 100644 docs/snippets/common/init-command-specific-version.npx.js.mdx
 create mode 100644 docs/snippets/common/init-command-specific-version.pnpm.js.mdx
 create mode 100644 docs/snippets/common/init-command-specific-version.yarn.js.mdx
 create mode 100644 docs/snippets/common/upgrade-command-specific-version.npx.js.mdx
 create mode 100644 docs/snippets/common/upgrade-command-specific-version.pnpm.js.mdx
 create mode 100644 docs/snippets/common/upgrade-command-specific-version.yarn.js.mdx
 delete mode 100644 docs/snippets/vue/button-component-with-proptypes.2.js.mdx
 delete mode 100644 docs/snippets/vue/button-component-with-proptypes.2.ts.mdx
 delete mode 100644 docs/snippets/vue/button-group-story.2.js.mdx
 delete mode 100644 docs/snippets/vue/button-group-story.2.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/button-group-story.2.ts.mdx
 delete mode 100644 docs/snippets/vue/button-implementation.2.js.mdx
 delete mode 100644 docs/snippets/vue/button-implementation.2.ts.mdx
 delete mode 100644 docs/snippets/vue/button-story-click-handler-args.2.js.mdx
 delete mode 100644 docs/snippets/vue/button-story-click-handler-args.2.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/button-story-click-handler-args.2.ts.mdx
 delete mode 100644 docs/snippets/vue/button-story-click-handler.2.js.mdx
 delete mode 100644 docs/snippets/vue/button-story-click-handler.2.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/button-story-click-handler.2.ts.mdx
 delete mode 100644 docs/snippets/vue/button-story-using-args.2.js.mdx
 delete mode 100644 docs/snippets/vue/button-story-using-args.2.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/button-story-using-args.2.ts.mdx
 delete mode 100644 docs/snippets/vue/button-story-with-args.2.js.mdx
 delete mode 100644 docs/snippets/vue/button-story-with-args.2.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/button-story-with-args.2.ts.mdx
 delete mode 100644 docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx
 delete mode 100644 docs/snippets/vue/component-story-static-asset-with-import.2.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/component-story-static-asset-with-import.2.ts.mdx
 delete mode 100644 docs/snippets/vue/component-story-with-accessibility.2.js.mdx
 delete mode 100644 docs/snippets/vue/component-story-with-accessibility.2.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/component-story-with-accessibility.2.ts.mdx
 delete mode 100644 docs/snippets/vue/csf-2-example-starter.2.js.mdx
 delete mode 100644 docs/snippets/vue/csf-2-example-starter.2.ts.mdx
 delete mode 100644 docs/snippets/vue/csf-2-example-story.2.js.mdx
 delete mode 100644 docs/snippets/vue/csf-2-example-story.2.ts.mdx
 delete mode 100644 docs/snippets/vue/csf-3-example-render.2.js.mdx
 delete mode 100644 docs/snippets/vue/csf-3-example-render.2.ts.mdx
 delete mode 100644 docs/snippets/vue/histogram-story.2.js.mdx
 delete mode 100644 docs/snippets/vue/histogram-story.2.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/histogram-story.2.ts.mdx
 delete mode 100644 docs/snippets/vue/list-story-reuse-data.2.js.mdx
 delete mode 100644 docs/snippets/vue/list-story-reuse-data.2.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/list-story-reuse-data.2.ts.mdx
 delete mode 100644 docs/snippets/vue/list-story-template.2.js.mdx
 delete mode 100644 docs/snippets/vue/list-story-template.2.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/list-story-template.2.ts.mdx
 delete mode 100644 docs/snippets/vue/list-story-unchecked.2.js.mdx
 delete mode 100644 docs/snippets/vue/list-story-unchecked.2.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/list-story-unchecked.2.ts.mdx
 delete mode 100644 docs/snippets/vue/page-story-slots.2.js.mdx
 delete mode 100644 docs/snippets/vue/page-story-slots.2.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/page-story-slots.2.ts.mdx
 delete mode 100644 docs/snippets/vue/page-story.2.-ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/page-story.2.js.mdx
 delete mode 100644 docs/snippets/vue/page-story.2.ts.mdx
 delete mode 100644 docs/snippets/vue/simple-page-implementation.2.js.mdx
 delete mode 100644 docs/snippets/vue/storybook-preview-with-hoc-component-decorator.component-2.js.mdx
 delete mode 100644 docs/snippets/vue/storybook-preview-with-hoc-component-decorator.component-2.ts.mdx
 delete mode 100644 docs/snippets/vue/storybook-preview-with-library-decorator.library-2.js.mdx
 delete mode 100644 docs/snippets/vue/storybook-preview-with-library-decorator.library-2.ts.mdx
 delete mode 100644 docs/snippets/vue/storybook-preview-with-mixin-decorator.mixin-2.js.mdx
 delete mode 100644 docs/snippets/vue/storybook-preview-with-mixin-decorator.mixin-2.ts.mdx
 delete mode 100644 docs/snippets/vue/storybook-testing-addon-optional-config.2.js.mdx
 delete mode 100644 docs/snippets/vue/your-component.2.js.mdx
 delete mode 100644 docs/snippets/vue/your-component.2.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/your-component.2.ts.mdx

diff --git a/README.md b/README.md
index 7c174bdcc250..8067ec3d6446 100644
--- a/README.md
+++ b/README.md
@@ -101,7 +101,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
 | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [React](code/renderers/react)                                  | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://next--630511d655df72125520f051.chromatic.com/)          | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react)                                          |
 | [Angular](code/frameworks/angular/)                            | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://next--6322ce6af69825592bbb28fc.chromatic.com/)        | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/)                                  |
-| [Vue](code/renderers/vue)                                      | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/)            | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](code/renderers/vue)                                                |
+| [Vue 3](code/renderers/vue3)                                   | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/)            | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](code/renderers/vue)                                                |
 | [Web components](code/renderers/web-components)                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://next--638db5bf49adfdfe8cf545e0.chromatic.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components)                       |
 | [React Native](https://github.com/storybookjs/react-native)    | [![](https://img.shields.io/npm/v/@storybook/react-native/latest?style=flat-square&color=blue&label)](/)                                                                     | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native)     |
 | [HTML](code/renderers/html)                                    | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://next--63dd39a158cf6fc05199b4bb.chromatic.com/)           | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html)                                             |
diff --git a/code/addons/controls/README.md b/code/addons/controls/README.md
index 1d3a8ae3797b..08c39343d1f4 100644
--- a/code/addons/controls/README.md
+++ b/code/addons/controls/README.md
@@ -209,5 +209,3 @@ export const Template = (args) => <Button {...args} />
   {Template.bind({})}
 </Story>
 ```
-
-For more info, see a full [Controls example in MDX for Vue](https://raw.githubusercontent.com/storybookjs/storybook/next/code/examples/vue-kitchen-sink/src/stories/addon-controls.stories.mdx).
diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md
index 9a9a3debad2a..a98b53fb5741 100644
--- a/code/addons/docs/README.md
+++ b/code/addons/docs/README.md
@@ -12,7 +12,7 @@ Storybook Docs transforms your Storybook stories into world-class component docu
 
 **MDX.** If you want more control, `MDX` allows you to write long-form markdown documentation and include stories in one file. You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories.
 
-Just like Storybook, Docs supports every major view layer including React, Vue, Angular, HTML, Web components, Svelte, and many more.
+Just like Storybook, Docs supports every major view layer including React, Vue 3, Angular, HTML, Web components, Svelte, and many more.
 
 Read on to learn more:
 
@@ -127,7 +127,7 @@ Add the following to your Jest configuration:
 ### Be sure to check framework specific installation needs
 
 - [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here)
-- [Vue](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/vue)
+- [Vue 3](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/vue3)
 - [Angular](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/angular)
 - [Ember](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/ember)
 - [Web Components](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/web-components)
diff --git a/code/addons/docs/common/README.md b/code/addons/docs/common/README.md
index 1195d287d444..4a43dfe641de 100644
--- a/code/addons/docs/common/README.md
+++ b/code/addons/docs/common/README.md
@@ -2,7 +2,7 @@
 
 Storybook Docs transforms your Storybook stories into world-class component documentation. Docs supports [all web frameworks that Storybook supports](../README.md#framework-support).
 
-Popular frameworks like [React](../react/README.md)/[Vue](../vue/README.md)/[Angular](../angular/README.md)/[Ember](../ember/README.md)/[Web components](../web-components/README.md) have their own framework-specific optimizations and setup guides. This README documents the "common" setup for other frameworks that don't have any docs-specific optimizations.
+Popular frameworks like [React](../react/README.md)/[Vue 3](../vue3/README.md)/[Angular](../angular/README.md)/[Ember](../ember/README.md)/[Web components](../web-components/README.md) have their own framework-specific optimizations and setup guides. This README documents the "common" setup for other frameworks that don't have any docs-specific optimizations.
 
 - [Installation](#installation)
 - [DocsPage](#docspage)
diff --git a/code/addons/docs/docs/docspage.md b/code/addons/docs/docs/docspage.md
index 8a8da1fc773a..535adb4ff395 100644
--- a/code/addons/docs/docs/docspage.md
+++ b/code/addons/docs/docs/docspage.md
@@ -23,7 +23,7 @@ Like `addon-info`, `DocsPage` provides sensible defaults, meaning it adds docume
 
 However, `DocsPage` brings the following improvements:
 
-- It supports all frameworks that Storybook supports, including React, Vue, Angular and [many others](../README.md#framework-support).
+- It supports all frameworks that Storybook supports, including React, Vue 3, Angular and [many others](../README.md#framework-support).
 - It generates better documentation that can be used as a standalone docs site, independently of Storybook.
 - It supports better configuration, so you can capture project specific information with ease.
 - It's built to work with [`MDX`](./mdx.md) when you need more control of your documentation.
diff --git a/code/addons/docs/docs/faq.md b/code/addons/docs/docs/faq.md
index 5710640cc092..895098b7ad31 100644
--- a/code/addons/docs/docs/faq.md
+++ b/code/addons/docs/docs/faq.md
@@ -9,7 +9,7 @@ You've read the [Storybook Docs README](../README.md). You're already familiar w
 
 ## Does Docs support framework X?
 
-Docs does not currently support [React Native](https://github.com/storybookjs/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, and others.
+Docs does not currently support [React Native](https://github.com/storybookjs/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue 3, Angular, Ember, Svelte, and others.
 
 ## How does Docs interact with existing addons?
 
@@ -44,6 +44,6 @@ This is [Component Story Format (CSF)](https://medium.com/storybookjs/component-
 ## More resources
 
 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
-- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue 3](../vue3/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/code/addons/docs/docs/mdx.md b/code/addons/docs/docs/mdx.md
index 50039fd7fa6e..3f251fd9a9e5 100644
--- a/code/addons/docs/docs/mdx.md
+++ b/code/addons/docs/docs/mdx.md
@@ -195,6 +195,6 @@ Be sure to update your Storybook config file to load `.stories.mdx` stories, as
 ## More resources
 
 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
-- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue 3](../vue3/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/code/addons/docs/docs/multiframework.md b/code/addons/docs/docs/multiframework.md
index 7959f79ef426..070d94089b00 100644
--- a/code/addons/docs/docs/multiframework.md
+++ b/code/addons/docs/docs/multiframework.md
@@ -13,7 +13,7 @@ Storybook Docs [provides basic support for all non-RN Storybook view layers](../
 
 Your framework might need framework-specific configuration. This could include adding extra webpack loaders or global decorators/story parameters.
 
-Addon-docs handles this kind of customization by file naming convention. Its [common preset](https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/common/preset.ts) does this by looking for files `../<framework>/{preset,config}.[tj]sx?`, where `<framework>` is the framework identifier, e.g. `vue`, `angular`, `react`, etc.
+Addon-docs handles this kind of customization by file naming convention. Its [common preset](https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/common/preset.ts) does this by looking for files `../<framework>/{preset,config}.[tj]sx?`, where `<framework>` is the framework identifier, e.g. `vue3`, `angular`, `react`, etc.
 
 For example, consider Storybook Docs for Vue, which needs `vue-docgen-loader` in its webpack config, and also has custom extraction functions for [props tables](#props-tables) and [component descriptions](#component-descriptions).
 
@@ -162,6 +162,6 @@ This configures the `jsxDecorator` to be run on every story.
 ## More resources
 
 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
-- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue 3](../vue3/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/code/addons/docs/docs/props-tables.md b/code/addons/docs/docs/props-tables.md
index 7bc30bcd0dcb..82c670f2a01d 100644
--- a/code/addons/docs/docs/props-tables.md
+++ b/code/addons/docs/docs/props-tables.md
@@ -19,7 +19,7 @@ Storybook Docs automatically generates props tables for components in supported
 
 ## Usage
 
-For framework-specific setup instructions, see the framework's README: [React](../react/README.md), [Vue](../vue/README.md), [Angular](../angular/README.md), [Web Components](../web-components/README.md), [Ember](../ember/README.md).
+For framework-specific setup instructions, see the framework's README: [React](../react/README.md), [Vue3 ](../vue3/README.md), [Angular](../angular/README.md), [Web Components](../web-components/README.md), [Ember](../ember/README.md).
 
 ### DocsPage
 
@@ -255,7 +255,7 @@ This package relies on a variety of sub-packages to extract property information
 | Framework      | Underlying library                       | Docs                                             | Open issues                                                                                                                                                        |
 | -------------- | ---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | React          | `react-docgen` `react-docgen-typescript` | [Docs](../react/README.md#props-tables)          | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+react%22)          |
-| Vue            | `vue-docgen-api`                         | [Docs](../vue/README.md#props-tables)            | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+vue%22)            |
+| Vue 3          | `vue-docgen-api`                         | [Docs](../vue3/README.md#props-tables)           | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+vue%22)            |
 | Angular        | `compodoc`                               | [Docs](../angular/README.md#props-tables)        | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+angular%22)        |
 | Web-components | `custom-elements.json`                   | [Docs](../web-components/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+web-components%22) |
 | Ember          | `yui-doc`                                | [Docs](../ember/README.md#props-tables)          | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+ember%22)          |
@@ -263,6 +263,6 @@ This package relies on a variety of sub-packages to extract property information
 ## More resources
 
 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
-- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue 3](../vue3/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/code/addons/docs/docs/recipes.md b/code/addons/docs/docs/recipes.md
index df2892df89e4..ca03815ce2dd 100644
--- a/code/addons/docs/docs/recipes.md
+++ b/code/addons/docs/docs/recipes.md
@@ -352,6 +352,6 @@ There is also an webpack loader package that extracts descriptions from jsdoc co
 ## More resources
 
 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
-- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue 3](../vue3/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/code/addons/docs/docs/theming.md b/code/addons/docs/docs/theming.md
index a570ba61073a..6f66a2d37267 100644
--- a/code/addons/docs/docs/theming.md
+++ b/code/addons/docs/docs/theming.md
@@ -92,6 +92,6 @@ addParameters({
 ## More resources
 
 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
-- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue 3](../vue3/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/code/addons/toolbars/README.md b/code/addons/toolbars/README.md
index 560966c094ce..dcb9b9c4deef 100644
--- a/code/addons/toolbars/README.md
+++ b/code/addons/toolbars/README.md
@@ -42,4 +42,4 @@ The primary difference between the two packages is that `addon-toolbars` makes u
 
 - **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs), or even in other addons.
 
-* **Framework compatibility**. Args are completely framework-independent, so `addon-toolbars` is compatible with React, Vue, Angular, etc. out of the box with no framework logic needed in the addon.
+* **Framework compatibility**. Args are completely framework-independent, so `addon-toolbars` is compatible with React, Vue 3, Angular, etc. out of the box with no framework logic needed in the addon.
diff --git a/code/builders/builder-vite/README.md b/code/builders/builder-vite/README.md
index 1e5026e36443..02fce9b00d35 100644
--- a/code/builders/builder-vite/README.md
+++ b/code/builders/builder-vite/README.md
@@ -133,7 +133,7 @@ See [Customize Vite config](#customize-vite-config) for details about using `vit
 
 ### React Docgen
 
-Docgen is used in Storybook to populate the props table in docs view, the controls panel, and for several other addons. Docgen is supported in Svelte, Vue, and React, and there are two docgen options when using react, `react-docgen` and `react-docgen-typescript`. You can learn more about the pros/cons of each in [this gist](https://gist.github.com/shilman/036313ffa3af52ca986b375d90ea46b0). By default, if we find a `typescript` dependency in your `package.json` file, we will assume you're using typescript and will choose `react-docgen-typescript`. You can change this by setting the `typescript.reactDocgen` option in your `.storybook/main.js` file:
+Docgen is used in Storybook to populate the props table in docs view, the controls panel, and for several other addons. Docgen is supported in Svelte, Vue 3, and React, and there are two docgen options when using react, `react-docgen` and `react-docgen-typescript`. You can learn more about the pros/cons of each in [this gist](https://gist.github.com/shilman/036313ffa3af52ca986b375d90ea46b0). By default, if we find a `typescript` dependency in your `package.json` file, we will assume you're using typescript and will choose `react-docgen-typescript`. You can change this by setting the `typescript.reactDocgen` option in your `.storybook/main.js` file:
 
 ```javascript
 export default {
@@ -158,7 +158,7 @@ storybook configuration directory. This can be overridden in viteFinal.
 ## Contributing
 
 The Vite builder cannot build itself.
-Are you willing to contribute? We are especially looking for Vue and Svelte experts, as the current maintainers are react users.
+Are you willing to contribute? We are especially looking for Vue 3 and Svelte experts, as the current maintainers are react users.
 
 Have a look at the GitHub issues with the `vite` label for known bugs. If you find any new bugs,
 feel free to create an issue or send a pull request!
diff --git a/code/frameworks/vue3-vite/README.md b/code/frameworks/vue3-vite/README.md
index 1eadfa5c7b7a..bb1eb15f980e 100644
--- a/code/frameworks/vue3-vite/README.md
+++ b/code/frameworks/vue3-vite/README.md
@@ -20,11 +20,11 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
 ---
 
 Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
-You can also build a [static version](https://storybook.js.org/docs/vue/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
+You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
 
 ## Extending the Vue application
 
-Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview.
+Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview.
 When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.
 
 Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration.
diff --git a/code/frameworks/vue3-webpack5/README.md b/code/frameworks/vue3-webpack5/README.md
index 3795b03d961f..2e365a8a7f8e 100644
--- a/code/frameworks/vue3-webpack5/README.md
+++ b/code/frameworks/vue3-webpack5/README.md
@@ -20,11 +20,11 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
 ---
 
 Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
-You can also build a [static version](https://storybook.js.org/docs/vue/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
+You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
 
 ## Extending the Vue application
 
-Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview.
+Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview.
 When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.
 
 Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration.
diff --git a/code/lib/core-server/README.md b/code/lib/core-server/README.md
index 9bfbc5667d8e..4af52cb89409 100644
--- a/code/lib/core-server/README.md
+++ b/code/lib/core-server/README.md
@@ -1,6 +1,6 @@
 # Storybook Core-server
 
-This package contains common node-side functionality used among the different frameworks (React, RN, Vue, Ember, Angular, etc).
+This package contains common node-side functionality used among the different frameworks (React, RN, Vue 3, Ember, Angular, etc).
 
 It contains:
 
diff --git a/code/lib/preview-api/README-core-client.md b/code/lib/preview-api/README-core-client.md
index c77706dc0cae..b937562ae166 100644
--- a/code/lib/preview-api/README-core-client.md
+++ b/code/lib/preview-api/README-core-client.md
@@ -1,6 +1,6 @@
 # Storybook Core-Client
 
-This package contains browser-side functionality shared amongst all the frameworks (React, RN, Vue, Ember, Angular, etc) in the old "v6" story store back-compatibility layer.
+This package contains browser-side functionality shared amongst all the frameworks (React, RN, Vue 3, Ember, Angular, etc) in the old "v6" story store back-compatibility layer.
 
 A framework calls the `start(renderToCanvas, { render, decorateStory })` function and provides:
 
diff --git a/code/presets/vue3-webpack/README.md b/code/presets/vue3-webpack/README.md
index d600b0fa0eab..e361f8bc4222 100644
--- a/code/presets/vue3-webpack/README.md
+++ b/code/presets/vue3-webpack/README.md
@@ -1,6 +1,6 @@
 # Storybook Webpack preset for Vue3
 
-This package is a [preset](https://storybook.js.org/docs/vue/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Vue3.
+This package is a [preset](https://storybook.js.org/docs/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Vue 3.
 It's an internal package that's not intended to be used directly by users.
 
-- More info on [Storybook for Vue3](https://storybook.js.org/docs/vue/get-started)
+- More info on [Storybook for Vue3](https://storybook.js.org/docs/get-started/why-storybook)
\ No newline at end of file
diff --git a/docs/api/arg-types.md b/docs/api/arg-types.md
index 555462c1354f..ce52bad09f84 100644
--- a/docs/api/arg-types.md
+++ b/docs/api/arg-types.md
@@ -19,7 +19,7 @@ To do so, Storybook uses various static analysis tools depending on your framewo
 | Framework     | Static analysis tool                                                                                                                          |
 | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
 | React         | [react-docgen](https://github.com/reactjs/react-docgen) or [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) |
-| Vue           | [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api)                                       |
+| Vue 3         | [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api)                                       |
 | Angular       | [compodoc](https://compodoc.app/)                                                                                                             |
 | WebComponents | [custom-element.json](https://github.com/webcomponents/custom-elements-json)                                                                  |
 | Ember         | [YUI doc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components)                                                  |
diff --git a/docs/api/csf.md b/docs/api/csf.md
index d5ed3eb7ec40..1ef89f2e4605 100644
--- a/docs/api/csf.md
+++ b/docs/api/csf.md
@@ -108,8 +108,6 @@ Consider Storybook’s ["Button" example](../writing-stories/index.md#defining-s
   paths={[
     'react/button-story-click-handler.js.mdx',
     'react/button-story-click-handler.ts.mdx',
-    'vue/button-story-click-handler.2.js.mdx',
-    'vue/button-story-click-handler.2.ts.mdx',
     'vue/button-story-click-handler.3.js.mdx',
     'vue/button-story-click-handler.3.ts.mdx',
     'svelte/button-story-click-handler.js.mdx',
@@ -134,8 +132,6 @@ Now consider the same example, re-written with args:
   paths={[
     'react/button-story-click-handler-args.js.mdx',
     'react/button-story-click-handler-args.ts.mdx',
-    'vue/button-story-click-handler-args.2.js.mdx',
-    'vue/button-story-click-handler-args.2.ts.mdx',
     'vue/button-story-click-handler-args.3.js.mdx',
     'vue/button-story-click-handler-args.3.ts.mdx',
     'angular/button-story-click-handler-args.ts.mdx',
@@ -318,8 +314,6 @@ In CSF 2, the named exports are always functions that instantiate a component, a
   paths={[
     'react/csf-2-example-starter.js.mdx',
     'react/csf-2-example-starter.ts.mdx',
-    'vue/csf-2-example-starter.2.js.mdx',
-    'vue/csf-2-example-starter.2.ts.mdx',
     'vue/csf-2-example-starter.3.js.mdx',
     'vue/csf-2-example-starter.3.ts.mdx',
     'angular/csf-2-example-starter.ts.mdx',
@@ -404,8 +398,6 @@ Let's start with a simple CSF 2 story function:
   paths={[
     'react/csf-2-example-story.js.mdx',
     'react/csf-2-example-story.ts.mdx',
-    'vue/csf-2-example-story.2.js.mdx',
-    'vue/csf-2-example-story.2.ts.mdx',
     'vue/csf-2-example-story.3.js.mdx',
     'vue/csf-2-example-story.3.ts.mdx',
     'angular/csf-2-example-story.ts.mdx',
@@ -428,8 +420,6 @@ Now, let's rewrite it as a story object in CSF 3 with an explicit `render` funct
   paths={[
     'react/csf-3-example-render.js.mdx',
     'react/csf-3-example-render.ts.mdx',
-    'vue/csf-3-example-render.2.js.mdx',
-    'vue/csf-3-example-render.2.ts.mdx',
     'vue/csf-3-example-render.3.js.mdx',
     'vue/csf-3-example-render.3.ts.mdx',
     'angular/csf-3-example-render.ts.mdx',
diff --git a/docs/builders/vite.md b/docs/builders/vite.md
index 5a2025ed0a51..61600283f255 100644
--- a/docs/builders/vite.md
+++ b/docs/builders/vite.md
@@ -114,7 +114,7 @@ If you need to override it, you can use the `viteFinal` function and adjust it.
 
 ### ArgTypes are not generated automatically
 
-Currently, [automatic argType inference](../api/arg-types.md#automatic-argtype-inference) is only available for React, Vue3 and Svelte (JSDocs only). With React, the Vite builder defaults to `react-docgen-typescript` if TypeScript is listed as a dependency. If you run into any issues, you can revert to `react-docgen` by updating your Storybook configuration file as follows:
+Currently, [automatic argType inference](../api/arg-types.md#automatic-argtype-inference) is only available for React, Vue 3 and Svelte (JSDocs only). With React, the Vite builder defaults to `react-docgen-typescript` if TypeScript is listed as a dependency. If you run into any issues, you can revert to `react-docgen` by updating your Storybook configuration file as follows:
 
 <!-- prettier-ignore-start -->
 
diff --git a/docs/configure/frameworks-feature-support.md b/docs/configure/frameworks-feature-support.md
index 306ee9e94160..4d34dd46fcd7 100644
--- a/docs/configure/frameworks-feature-support.md
+++ b/docs/configure/frameworks-feature-support.md
@@ -10,51 +10,51 @@ Below is a comprehensive table of what’s supported in which framework integrat
 
 Core frameworks have dedicated maintainers or contributors who are responsible for maintaining the integration. As such, you can use most Storybook features in these frameworks.
 
-|                                                                                           | React | Vue | Angular | Web Components |
-| ----------------------------------------------------------------------------------------- | ----- | --- | ------- | -------------- |
-| **Essentials**                                                                            |       |     |         |                |
-| [Actions](../essentials/actions.md)                                                       | ✅    | ✅  | ✅      | ✅             |
-| [Backgrounds](../essentials/backgrounds.md)                                               | ✅    | ✅  | ✅      | ✅             |
-| [Docs](../writing-docs/index.md)                                                          | ✅    | ✅  | ✅      | ✅             |
-| [Viewport](../essentials/viewport.md)                                                     | ✅    | ✅  | ✅      | ✅             |
-| [Controls](../essentials/controls.md)                                                     | ✅    | ✅  | ✅      | ✅             |
-| [Measure](../essentials/measure-and-outline.md#measure-addon)                             | ✅    | ✅  | ✅      | ✅             |
-| [Outline](../essentials/measure-and-outline.md#outline-addon)                             | ✅    | ✅  | ✅      | ✅             |
-| **Addons**                                                                                |       |     |         |                |
-| [A11y](../writing-tests/accessibility-testing.md)                                         | ✅    | ✅  | ✅      | ✅             |
-| [Interactions](../writing-tests/interaction-testing.md)                                   | ✅    | ✅  | ✅      | ✅             |
-| [Test runner](../writing-tests/test-runner.md)                                            | ✅    | ✅  | ✅      | ✅             |
-| [Test coverage](../writing-tests/test-coverage.md)                                        | ✅    | ✅  | ✅      | ✅             |
-| [CSS resources](https://github.com/storybookjs/addon-cssresources)                        | ✅    | ✅  | ✅      | ✅             |
-| [Design assets](https://github.com/storybookjs/addon-design-assets)                       | ✅    | ✅  | ✅      | ✅             |
-| [Events](https://github.com/storybookjs/addon-events)                                     | ✅    | ✅  | ✅      | ✅             |
-| [Google analytics](https://github.com/storybookjs/addon-google-analytics)                 | ✅    | ✅  | ✅      | ✅             |
-| [GraphQL](https://github.com/storybookjs/addon-graphql)                                   | ✅    |     | ✅      |                |
-| [Jest](https://github.com/storybookjs/storybook/tree/next/code/addons/jest)               | ✅    | ✅  | ✅      | ✅             |
-| [Links](https://github.com/storybookjs/storybook/tree/next/code/addons/links)             | ✅    | ✅  | ✅      | ✅             |
-| [Queryparams](https://github.com/storybookjs/addon-queryparams)                           | ✅    | ✅  | ✅      | ✅             |
-| [Storysource](https://github.com/storybookjs/storybook/tree/next/code/addons/storysource) | ✅    | ✅  | ✅      | ✅             |
-| **Docs**                                                                                  |       |     |         |                |
-| [CSF Stories](../api/csf.md)                                                              | ✅    | ✅  | ✅      | ✅             |
-| [Autodocs](../writing-docs/autodocs.md)                                                   | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - ArgTypes](../api/doc-block-argtypes.md)                                     | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - Canvas](../api/doc-block-canvas.md)                                         | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - ColorPalette](../api/doc-block-colorpalette.md)                             | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - Controls](../api/doc-block-controls.md)                                     | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - Description](../api/doc-block-description.md)                               | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - IconGallery](../api/doc-block-icongallery.md)                               | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - Markdown](../api/doc-block-markdown.md)                                     | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - Meta](../api/doc-block-meta.md)                                             | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - Primary](../api/doc-block-primary.md)                                       | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - Source](../api/doc-block-source.md)                                         | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - Story](../api/doc-block-story.md)                                           | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - Stories](../api/doc-block-stories.md)                                       | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - Subtitle](../api/doc-block-subtitle.md)                                     | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - Title](../api/doc-block-title.md)                                           | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - Typeset](../api/doc-block-typeset.md)                                       | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - Unstyled](../api/doc-block-unstyled.md)                                     | ✅    | ✅  | ✅      | ✅             |
-| [Doc Blocks - UseOf](../api/doc-block-useof.md)                                           | ✅    | ✅  | ✅      | ✅             |
-| Inline stories                                                                            | ✅    | ✅  | ✅      | ✅             |
+|                                                                                           | React | Vue 3 | Angular | Web Components |
+| ----------------------------------------------------------------------------------------- | ----- | ----- | ------- | -------------- |
+| **Essentials**                                                                            |       |       |         |                |
+| [Actions](../essentials/actions.md)                                                       | ✅    | ✅    | ✅      | ✅             |
+| [Backgrounds](../essentials/backgrounds.md)                                               | ✅    | ✅    | ✅      | ✅             |
+| [Docs](../writing-docs/index.md)                                                          | ✅    | ✅    | ✅      | ✅             |
+| [Viewport](../essentials/viewport.md)                                                     | ✅    | ✅    | ✅      | ✅             |
+| [Controls](../essentials/controls.md)                                                     | ✅    | ✅    | ✅      | ✅             |
+| [Measure](../essentials/measure-and-outline.md#measure-addon)                             | ✅    | ✅    | ✅      | ✅             |
+| [Outline](../essentials/measure-and-outline.md#outline-addon)                             | ✅    | ✅    | ✅      | ✅             |
+| **Addons**                                                                                |       |       |         |                |
+| [A11y](../writing-tests/accessibility-testing.md)                                         | ✅    | ✅    | ✅      | ✅             |
+| [Interactions](../writing-tests/interaction-testing.md)                                   | ✅    | ✅    | ✅      | ✅             |
+| [Test runner](../writing-tests/test-runner.md)                                            | ✅    | ✅    | ✅      | ✅             |
+| [Test coverage](../writing-tests/test-coverage.md)                                        | ✅    | ✅    | ✅      | ✅             |
+| [CSS resources](https://github.com/storybookjs/addon-cssresources)                        | ✅    | ✅    | ✅      | ✅             |
+| [Design assets](https://github.com/storybookjs/addon-design-assets)                       | ✅    | ✅    | ✅      | ✅             |
+| [Events](https://github.com/storybookjs/addon-events)                                     | ✅    | ✅    | ✅      | ✅             |
+| [Google analytics](https://github.com/storybookjs/addon-google-analytics)                 | ✅    | ✅    | ✅      | ✅             |
+| [GraphQL](https://github.com/storybookjs/addon-graphql)                                   | ✅    |       | ✅      |                |
+| [Jest](https://github.com/storybookjs/storybook/tree/next/code/addons/jest)               | ✅    | ✅    | ✅      | ✅             |
+| [Links](https://github.com/storybookjs/storybook/tree/next/code/addons/links)             | ✅    | ✅    | ✅      | ✅             |
+| [Queryparams](https://github.com/storybookjs/addon-queryparams)                           | ✅    | ✅    | ✅      | ✅             |
+| [Storysource](https://github.com/storybookjs/storybook/tree/next/code/addons/storysource) | ✅    | ✅    | ✅      | ✅             |
+| **Docs**                                                                                  |       |       |         |                |
+| [CSF Stories](../api/csf.md)                                                              | ✅    | ✅    | ✅      | ✅             |
+| [Autodocs](../writing-docs/autodocs.md)                                                   | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - ArgTypes](../api/doc-block-argtypes.md)                                     | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - Canvas](../api/doc-block-canvas.md)                                         | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - ColorPalette](../api/doc-block-colorpalette.md)                             | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - Controls](../api/doc-block-controls.md)                                     | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - Description](../api/doc-block-description.md)                               | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - IconGallery](../api/doc-block-icongallery.md)                               | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - Markdown](../api/doc-block-markdown.md)                                     | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - Meta](../api/doc-block-meta.md)                                             | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - Primary](../api/doc-block-primary.md)                                       | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - Source](../api/doc-block-source.md)                                         | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - Story](../api/doc-block-story.md)                                           | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - Stories](../api/doc-block-stories.md)                                       | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - Subtitle](../api/doc-block-subtitle.md)                                     | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - Title](../api/doc-block-title.md)                                           | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - Typeset](../api/doc-block-typeset.md)                                       | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - Unstyled](../api/doc-block-unstyled.md)                                     | ✅    | ✅    | ✅      | ✅             |
+| [Doc Blocks - UseOf](../api/doc-block-useof.md)                                           | ✅    | ✅    | ✅      | ✅             |
+| Inline stories                                                                            | ✅    | ✅    | ✅      | ✅             |
 
 ## Community frameworks
 
diff --git a/docs/configure/frameworks.md b/docs/configure/frameworks.md
index 8efe4b5dac8c..3aac04e55eaf 100644
--- a/docs/configure/frameworks.md
+++ b/docs/configure/frameworks.md
@@ -12,10 +12,10 @@ You start by [installing](../get-started/install.md) Storybook into an existing
 
 Storybook provides support for the leading industry builders and frameworks. However, that doesn't mean you can't use Storybook with other frameworks. Below is a list of currently supported frameworks divided by their builders.
 
-| Builder | Framework                                                                |
-| ------- | ------------------------------------------------------------------------ |
-| Webpack | React, Angular, Vue, Web Components, NextJS, HTML, Ember, Preact, Svelte |
-| Vite    | React, Vue, Web Components, HTML, Svelte, SvelteKit, Qwik, Solid         |
+| Builder | Framework                                                                  |
+| ------- | -------------------------------------------------------------------------- |
+| Webpack | React, Angular, Vue 3, Web Components, NextJS, HTML, Ember, Preact, Svelte |
+| Vite    | React, Vue 3, Web Components, HTML, Svelte, SvelteKit, Qwik, Solid         |
 
 ### What about feature support?
 
diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md
index 3ff5ad2f899d..77ffed4231db 100644
--- a/docs/configure/images-and-assets.md
+++ b/docs/configure/images-and-assets.md
@@ -16,8 +16,6 @@ Afterward, you can use any asset in your stories:
   paths={[
     'react/component-story-static-asset-with-import.js.mdx',
     'react/component-story-static-asset-with-import.ts.mdx',
-    'vue/component-story-static-asset-with-import.2.js.mdx',
-    'vue/component-story-static-asset-with-import.2.ts.mdx',
     'vue/component-story-static-asset-with-import.3.js.mdx',
     'vue/component-story-static-asset-with-import.3.ts.mdx',
     'angular/component-story-static-asset-with-import.ts.mdx',
diff --git a/docs/configure/telemetry.md b/docs/configure/telemetry.md
index f239c86a7247..c27621c78d45 100644
--- a/docs/configure/telemetry.md
+++ b/docs/configure/telemetry.md
@@ -8,7 +8,7 @@ Storybook collects completely anonymous data to help us improve user experience.
 
 Hundreds of thousands of developers use Storybook daily to build, test, and document components. Storybook is framework agnostic and integrates with the front-end ecosystem:
 
-- **JavaScript frameworks** such as [React](https://reactjs.org/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/) and [Solid](https://www.solidjs.com/)
+- **JavaScript frameworks** such as [React](https://reactjs.org/), [Vue 3](https://vuejs.org/), [Svelte](https://svelte.dev/) and [Solid](https://www.solidjs.com/)
 - **Libraries** such as [Styled-Components](https://styled-components.com/), [Tailwind](https://tailwindcss.com/), [Redux](https://redux.js.org/)
 - **Design tools** such as [Figma](https://figma.com/), [Sketch](https://www.sketch.com/), [Zeplin](https://zeplin.io/) and [InVision](https://www.invisionapp.com/)
 - **Workflow tools** such as [Notion](https://www.notion.so/product), [Confluence](https://www.atlassian.com/software/confluence), and [Jira](https://www.atlassian.com/software/jira)
@@ -31,7 +31,7 @@ Specifically, we track the following information in our telemetry events:
 - Storybook version.
 - Storybook metadata:
   - Language (e.g., TypeScript, JavaScript).
-  - Supported view layers (e.g., React, Vue, Angular, Svelte).
+  - Supported view layers (e.g., React, Vue 3, Angular, Svelte).
   - Builder (e.g., Webpack5, Vite).
   - Meta framework (e.g., [Next](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [CRA](https://create-react-app.dev/)).
   - [Addons](https://storybook.js.org/integrations) (e.g., [Essentials](../essentials/index.md), [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/)).
diff --git a/docs/configure/upgrading.md b/docs/configure/upgrading.md
index c5e57d8d714e..a91039f8df5d 100644
--- a/docs/configure/upgrading.md
+++ b/docs/configure/upgrading.md
@@ -76,3 +76,25 @@ If you'd like to downgrade to a stable version, manually edit the package versio
 Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
 
 </Callout>
+
+<IfRenderer renderer='vue'>
+
+## Troubleshooting
+
+### Storybook doesn't upgrade to the latest version when using Vue 2
+
+If you're attempting to upgrade Storybook to the latest version in your existing Vue 2 project, you will no longer be able to. This is because Vue 2 entered [End of Life](https://v2.vuejs.org/lts/) (EOL) on December 31st, 2023, and will no longer receive any updates from the Vue team. We recommend you upgrade your Vue 2 project to Vue 3 and then upgrade Storybook to the latest version. If you cannot upgrade your Vue 2 project to Vue 3, you can still upgrade Storybook, but only for the latest 7.x version. You can do this by running the following command:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/upgrade-command-specific-version.npx.js.mdx',
+    'common/upgrade-command-specific-version.yarn.js.mdx',
+    'common/upgrade-command-specific-version.pnpm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+</IfRenderer>
diff --git a/docs/contribute/code.md b/docs/contribute/code.md
index f386fa2f2be9..5c3c22fc73fe 100644
--- a/docs/contribute/code.md
+++ b/docs/contribute/code.md
@@ -108,7 +108,7 @@ Adding a story or set of generic stories to our suite helps you test your work.
 
 Assuming you're working on one of the [Essential addons](../essentials/index.md), there's a chance that a complete set of stories already exists. Check the addon's `template/stories` directory that documents how it's supposed to work and add your stories there.
 
-If you're modifying something related to a specific renderer (e.g., React, Vue, etc.), it will also have a similar `template/stories` directory in which you'll need to add your stories.
+If you're modifying something related to a specific renderer (e.g., React, Vue 3, etc.), it will also have a similar `template/stories` directory in which you'll need to add your stories.
 
 ### Add tests
 
diff --git a/docs/contribute/framework.md b/docs/contribute/framework.md
index 27fdf03b70af..854df5307627 100644
--- a/docs/contribute/framework.md
+++ b/docs/contribute/framework.md
@@ -2,7 +2,7 @@
 title: 'Contributing a Storybook framework'
 ---
 
-A Storybook framework is a node package that enables out-of-the-box support for either a metaframework (Next.js, NuxtJS, SvelteKit) or a combination of [builder](../builders/index.md) (Webpack, Vite) plus renderer (React, Angular, Vue, web components, etc).
+A Storybook framework is a node package that enables out-of-the-box support for either a metaframework (Next.js, NuxtJS, SvelteKit) or a combination of [builder](../builders/index.md) (Webpack, Vite) plus renderer (React, Angular, Vue 3, web components, etc).
 
 For metaframeworks, the Storybook framework also takes care of additional configuration necessary to make Storybook behave similarly to apps generated by the metaframework. For example, `@storybook/nextjs` [recreates or mocks a number of features of Next.js apps](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#supported-features) inside Storybook.
 
diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md
index 0ba9c72067f0..11ed71feedf1 100644
--- a/docs/contribute/new-snippets.md
+++ b/docs/contribute/new-snippets.md
@@ -10,7 +10,7 @@ Storybook maintains code snippets for a [variety of frameworks](../configure/fra
 
 We welcome community contributions to the code snippets. Here's a matrix of the frameworks we have snippets for. Help us add snippets for your favorite framework.
 
-| React                                                                        | Vue                                                                        | Angular                                                                        | Web Components                                                                        | Svelte                                                                        | Solid                                                                        | Ember | HTML | Preact |
+| React                                                                        | Vue 3                                                                      | Angular                                                                        | Web Components                                                                        | Svelte                                                                        | Solid                                                                        | Ember | HTML | Preact |
 | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----- | ---- | ------ |
 | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/react) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/vue) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/angular) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/web-components) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/svelte) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/solid) | ❌    | ❌   | ❌     |
 
@@ -48,7 +48,6 @@ Browse the documentation and look for the code snippets you're willing to contri
     'react/your-component.js.mdx',
     'react/your-component.ts.mdx',
     'angular/your-component.ts.mdx',
-    'vue/your-component.2.js.mdx',
     'vue/your-component.3.js.mdx',
     'svelte/your-component.js.mdx',
     'web-components/your-component.js.mdx',
@@ -72,7 +71,6 @@ Create the file `ember/your-component.js.mdx`, similar to the other frameworks,
     'react/your-component.js.mdx',
     'react/your-component.ts.mdx',
     'angular/your-component.ts.mdx',
-    'vue/your-component.2.js.mdx',
     'vue/your-component.3.js.mdx',
     'svelte/your-component.js.mdx',
     'web-components/your-component.js.mdx',
diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
index 5d86420c4ab0..0d526989608f 100644
--- a/docs/essentials/controls.md
+++ b/docs/essentials/controls.md
@@ -195,8 +195,6 @@ Until now, we only used auto-generated controls based on the component for which
   paths={[
     'react/page-story-slots.js.mdx',
     'react/page-story-slots.ts.mdx',
-    'vue/page-story-slots.2.js.mdx',
-    'vue/page-story-slots.2.ts.mdx',
     'vue/page-story-slots.3.js.mdx',
     'vue/page-story-slots.3.ts.mdx',
     'angular/page-story-slots.ts.mdx',
diff --git a/docs/faq.md b/docs/faq.md
index 580501e8ecd3..e3c1cf3e5793 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -21,7 +21,7 @@ Here are some answers to frequently asked questions. If you have a question, you
 - [Is it possible to browse the documentation for past versions of Storybook?](#is-it-possible-to-browse-the-documentation-for-past-versions-of-storybook)
 - [What icons are available for my toolbar or my addon?](#what-icons-are-available-for-my-toolbar-or-my-addon)
 - [I see a "No Preview" error with a Storybook production build](#i-see-a-no-preview-error-with-a-storybook-production-build)
-- [Can I use Storybook with Vue 3?](#can-i-use-storybook-with-vue-3)
+- [Can I use Storybook with Vue 2?](#can-i-use-storybook-with-vue-2)
 - [Why aren't my code blocks highlighted with Storybook MDX](#why-arent-my-code-blocks-highlighted-with-storybook-mdx)
 - [Why aren't my MDX 2 stories working in Storybook?](#why-arent-my-mdx-2-stories-working-in-storybook)
 - [Why are my mocked GraphQL queries failing with Storybook's MSW addon?](#why-are-my-mocked-graphql-queries-failing-with-storybooks-msw-addon)
@@ -402,9 +402,21 @@ Suppose you don't want to run the command above frequently. Add `http-server` as
 
 </Callout>
 
-## Can I use Storybook with Vue 3?
+## Can I use Storybook with Vue 2?
 
-Yes, with the release of version 6.2, Storybook now includes support for Vue 3. See the [install page](./get-started/install.md) for instructions.
+Vue 2 entered [End of Life](https://v2.vuejs.org/lts/) (EOL) on December 31, 2023, and is no longer supported by the Vue team. As a result, we've stopped supporting Vue 2 in Storybook 8 and above and will not be releasing any new versions that support it. We recommend upgrading your project to Vue 3, which Storybook fully supports. If that's not an option, you can still use Storybook with Vue 2 by installing the latest version of Storybook 7 with the following command:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/init-command-specific-version.npx.js.mdx',
+    'common/init-command-specific-version.yarn.js.mdx',
+    'common/init-command-specific-version.pnpm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 ## Why aren't my code blocks highlighted with Storybook MDX
 
diff --git a/docs/get-started/install.md b/docs/get-started/install.md
index 44b2cf7aad92..71b7800fa4a7 100644
--- a/docs/get-started/install.md
+++ b/docs/get-started/install.md
@@ -106,7 +106,6 @@ If you're working with a custom environment set up or need set up Storybook manu
 | Server         | `server`         |
 | Solid          | `solid`          |
 | Svelte         | `svelte`         |
-| Vue 2          | `vue`            |
 | Vue 3          | `vue3`           |
 | Web Components | `web-components` |
 
@@ -179,6 +178,26 @@ It may be the case that you're using an outdated version of the package and you
 
 </IfRenderer>
 
+<IfRenderer renderer='vue'>
+
+#### Storybook doesn't work with my Vue 2 project
+
+Vue 2 entered [End of Life](https://v2.vuejs.org/lts/) (EOL) on December 31st, 2023, and is no longer maintained by the Vue team. As a result, Storybook no longer supports Vue 2. We recommend you upgrade your project to Vue 3, which Storybook fully supports. If that's not an option, you can still use Storybook with Vue 2 by installing the latest version of Storybook 7 with the following command:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/init-command-specific-version.npx.js.mdx',
+    'common/init-command-specific-version.yarn.js.mdx',
+    'common/init-command-specific-version.pnpm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+</IfRenderer>
+
 <IfRenderer renderer='svelte'>
 
 #### Writing native Svelte stories
@@ -286,8 +305,6 @@ If you're still running into some issues during the installation process, we enc
 
 <IfRenderer renderer='vue'>
 
-- [Storybook's Vue 2 Webpack README](https://github.com/storybookjs/storybook/tree/main/code/frameworks/vue-webpack5) for more information on how to set up Storybook in your Vue 2 project with Webpack 5.
-- [Storybook's Vue 2 Vite README](https://github.com/storybookjs/storybook/tree/main/code/frameworks/vue-vite) for more information on how to set up Storybook in your Vue 2 project with Vite.
 - [Storybook's Vue 3 Webpack README](https://github.com/storybookjs/storybook/tree/next/code/frameworks/vue3-webpack5) for more information on how to set up Storybook in your Vue 3 project with Webpack 5.
 - [Storybook's Vue 3 Vite README](https://github.com/storybookjs/storybook/tree/next/code/frameworks/vue3-vite) for more information on how to set up Storybook in your Vue 3 project with Vite.
 - [Storybook's help documentation](https://storybook.js.org/community#support) to contact the community and ask for help.
diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md
index ee0d0c6f4dd7..2fa88a28efe2 100644
--- a/docs/get-started/setup.md
+++ b/docs/get-started/setup.md
@@ -13,8 +13,6 @@ Pick a simple component from your project, like a Button, and write a `.stories.
     'react/your-component.js.mdx',
     'react/your-component.ts.mdx',
     'angular/your-component.ts.mdx',
-    'vue/your-component.2.js.mdx',
-    'vue/your-component.2.ts.mdx',
     'vue/your-component.3.js.mdx',
     'vue/your-component.3.ts.mdx',
     'web-components/your-component.js.mdx',
@@ -94,16 +92,10 @@ Use [decorators](../writing-stories/decorators.md) to “wrap” every story in
   paths={[
     'react/storybook-preview-with-styled-components-decorator.js.mdx',
     'react/storybook-preview-with-styled-components-decorator.ts.mdx',
-    'vue/storybook-preview-with-library-decorator.library-2.js.mdx',
-    'vue/storybook-preview-with-library-decorator.library-2.ts.mdx',
     'vue/storybook-preview-with-library-decorator.library-3.js.mdx',
     'vue/storybook-preview-with-library-decorator.library-3.ts.mdx',
-    'vue/storybook-preview-with-hoc-component-decorator.component-2.js.mdx',
-    'vue/storybook-preview-with-hoc-component-decorator.component-2.ts.mdx',
     'vue/storybook-preview-with-hoc-component-decorator.component-3.js.mdx',
     'vue/storybook-preview-with-hoc-component-decorator.component-3.ts.mdx',
-    'vue/storybook-preview-with-mixin-decorator.mixin-2.js.mdx',
-    'vue/storybook-preview-with-mixin-decorator.mixin-2.ts.mdx',
     'angular/storybook-preview-with-styled-components-decorator.ts.mdx',
     'solid/storybook-preview-with-styled-components-decorator.js.mdx',
     'solid/storybook-preview-with-styled-components-decorator.ts.mdx',
diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
index 8efc1b0e785e..9ef527d5d6c3 100644
--- a/docs/get-started/whats-a-story.md
+++ b/docs/get-started/whats-a-story.md
@@ -47,8 +47,6 @@ The above story definition can be further improved to take advantage of [Storybo
   paths={[
     'react/button-story-with-args.js.mdx',
     'react/button-story-with-args.ts.mdx',
-    'vue/button-story-with-args.2.js.mdx',
-    'vue/button-story-with-args.2.ts.mdx',
     'vue/button-story-with-args.3.js.mdx',
     'vue/button-story-with-args.3.ts.mdx',
     'angular/button-story-with-args.ts.mdx',
diff --git a/docs/get-started/why-storybook.md b/docs/get-started/why-storybook.md
index c6a35d261daa..f340f08680d9 100644
--- a/docs/get-started/why-storybook.md
+++ b/docs/get-started/why-storybook.md
@@ -6,7 +6,7 @@ title: 'Why Storybook?'
 
 The web’s universality is pushing more complexity into the frontend. It began with responsive web design, which turned every user interface from one to 10, 100, 1000 different user interfaces. Over time, additional requirements piled on like devices, browsers, accessibility, performance, and async states.
 
-Component-driven tools like React, Vue, and Angular help break down complex UIs into simple components but they’re not silver bullets. As frontends grow, the number of components swells. Mature projects can contain hundreds of components that yield thousands of discrete variations.
+Component-driven tools like React, Vue 3, and Angular help break down complex UIs into simple components but they’re not silver bullets. As frontends grow, the number of components swells. Mature projects can contain hundreds of components that yield thousands of discrete variations.
 
 To complicate matters further, those UIs are painful to debug because they’re entangled in business logic, interactive states, and app context.
 
@@ -42,8 +42,6 @@ You write stories for granular UI component variation and then use those stories
     'react/histogram-story.js.mdx',
     'react/histogram-story.ts.mdx',
     'angular/histogram-story.ts.mdx',
-    'vue/histogram-story.2.js.mdx',
-    'vue/histogram-story.2.ts.mdx',
     'vue/histogram-story.3.js.mdx',
     'vue/histogram-story.3.ts.mdx',
     'svelte/histogram-story.js.mdx',
diff --git a/docs/snippets/common/init-command-specific-version.npx.js.mdx b/docs/snippets/common/init-command-specific-version.npx.js.mdx
new file mode 100644
index 000000000000..fd10b63fb0ce
--- /dev/null
+++ b/docs/snippets/common/init-command-specific-version.npx.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npx storybook@7.6.6 init
+```
diff --git a/docs/snippets/common/init-command-specific-version.pnpm.js.mdx b/docs/snippets/common/init-command-specific-version.pnpm.js.mdx
new file mode 100644
index 000000000000..351ed4eda295
--- /dev/null
+++ b/docs/snippets/common/init-command-specific-version.pnpm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+pnpm dlx storybook@7.6.6 init
+```
diff --git a/docs/snippets/common/init-command-specific-version.yarn.js.mdx b/docs/snippets/common/init-command-specific-version.yarn.js.mdx
new file mode 100644
index 000000000000..af093e4f96dd
--- /dev/null
+++ b/docs/snippets/common/init-command-specific-version.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn dlx storybook@7.6.6 init
+```
diff --git a/docs/snippets/common/upgrade-command-specific-version.npx.js.mdx b/docs/snippets/common/upgrade-command-specific-version.npx.js.mdx
new file mode 100644
index 000000000000..519145719c5c
--- /dev/null
+++ b/docs/snippets/common/upgrade-command-specific-version.npx.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npx storybook@7.6.6 upgrade
+```
diff --git a/docs/snippets/common/upgrade-command-specific-version.pnpm.js.mdx b/docs/snippets/common/upgrade-command-specific-version.pnpm.js.mdx
new file mode 100644
index 000000000000..344c5e97120b
--- /dev/null
+++ b/docs/snippets/common/upgrade-command-specific-version.pnpm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+pnpm dlx storybook@7.6.6 upgrade
+```
diff --git a/docs/snippets/common/upgrade-command-specific-version.yarn.js.mdx b/docs/snippets/common/upgrade-command-specific-version.yarn.js.mdx
new file mode 100644
index 000000000000..d4f7ac06314a
--- /dev/null
+++ b/docs/snippets/common/upgrade-command-specific-version.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn dlx storybook@7.6.6 upgrade
+```
diff --git a/docs/snippets/vue/addon-highlight-reset.ts-4-9.mdx b/docs/snippets/vue/addon-highlight-reset.ts-4-9.mdx
index 0a80a0f6c9ab..a20717cd633d 100644
--- a/docs/snippets/vue/addon-highlight-reset.ts-4-9.mdx
+++ b/docs/snippets/vue/addon-highlight-reset.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
diff --git a/docs/snippets/vue/addon-highlight-reset.ts.mdx b/docs/snippets/vue/addon-highlight-reset.ts.mdx
index c0b777d21590..be52b73a62ac 100644
--- a/docs/snippets/vue/addon-highlight-reset.ts.mdx
+++ b/docs/snippets/vue/addon-highlight-reset.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
diff --git a/docs/snippets/vue/button-component-with-proptypes.2.js.mdx b/docs/snippets/vue/button-component-with-proptypes.2.js.mdx
deleted file mode 100644
index e5ebaf46944c..000000000000
--- a/docs/snippets/vue/button-component-with-proptypes.2.js.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
-```html
-<!-- Button.vue -->
-
-<template>
-  <button type="button" :disabled="isDisabled">{{ label }}</button>
-</template>
-
-<script>
-  export default {
-    name: 'button',
-    props: {
-      /**
-       * Checks if the button should be disabled
-       */
-      isDisabled: {
-        type: Boolean,
-        default: false,
-        required: true,
-      },
-      /**
-       * The display label of the button
-       */
-      label: {
-        type: String,
-        default: 'One',
-        required: true,
-      },
-    },
-  };
-</script>
-```
diff --git a/docs/snippets/vue/button-component-with-proptypes.2.ts.mdx b/docs/snippets/vue/button-component-with-proptypes.2.ts.mdx
deleted file mode 100644
index c969a9195e41..000000000000
--- a/docs/snippets/vue/button-component-with-proptypes.2.ts.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-```html
-<!-- Button.vue -->
-
-<template>
-  <button type="button" :disabled="isDisabled">{{ label }}</button>
-</template>
-
-<script lang="ts">
-  import Vue from 'vue';
-  export default Vue.extend({
-    name: 'button',
-    props: {
-      /**
-       * Checks if the button should be disabled
-       */
-      label: {
-        type: String,
-        default: 'One',
-      },
-      /**
-       * The display label of the button
-       */
-      isDisabled: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  });
-</script>
-```
diff --git a/docs/snippets/vue/button-group-story.2.js.mdx b/docs/snippets/vue/button-group-story.2.js.mdx
deleted file mode 100644
index afd2d26a7bbc..000000000000
--- a/docs/snippets/vue/button-group-story.2.js.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-```js
-// ButtonGroup.stories.js
-
-import ButtonGroup from './ButtonGroup.vue';
-
-//👇 Imports the Button stories
-import * as ButtonStories from './Button.stories';
-
-export default {
-  component: ButtonGroup,
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Pair = {
-  render: (args, { argTypes }) => ({
-    components: { ButtonGroup },
-    props: Object.keys(argTypes),
-    template: '<ButtonGroup v-bind="$props" />',
-  }),
-  args: {
-    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
-    orientation: 'horizontal',
-  },
-};
-```
diff --git a/docs/snippets/vue/button-group-story.2.ts-4-9.mdx b/docs/snippets/vue/button-group-story.2.ts-4-9.mdx
deleted file mode 100644
index 092fb2a0d0e2..000000000000
--- a/docs/snippets/vue/button-group-story.2.ts-4-9.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-```ts
-// ButtonGroup.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import ButtonGroup from './ButtonGroup.vue';
-
-//👇 Imports the Button stories
-import * as ButtonStories from './Button.stories';
-
-const meta = {
-  component: ButtonGroup,
-} satisfies Meta<typeof ButtonGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Pair: Story = {
-  render: (args, { argTypes }) => ({
-    components: { ButtonGroup },
-    props: Object.keys(argTypes),
-    template: '<ButtonGroup v-bind="$props" />',
-  }),
-  args: {
-    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
-    orientation: 'horizontal',
-  },
-};
-```
diff --git a/docs/snippets/vue/button-group-story.2.ts.mdx b/docs/snippets/vue/button-group-story.2.ts.mdx
deleted file mode 100644
index 05369c08aa1d..000000000000
--- a/docs/snippets/vue/button-group-story.2.ts.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-```ts
-// ButtonGroup.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import ButtonGroup from './ButtonGroup.vue';
-
-//👇 Imports the Button stories
-import * as ButtonStories from './Button.stories';
-
-const meta: Meta<typeof ButtonGroup> = {
-  component: ButtonGroup,
-};
-
-export default meta;
-type Story = StoryObj<typeof ButtonGroup>;
-
-export const Pair: Story = {
-  render: (args, { argTypes }) => ({
-    components: { ButtonGroup },
-    props: Object.keys(argTypes),
-    template: '<ButtonGroup v-bind="$props" />',
-  }),
-  args: {
-    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
-    orientation: 'horizontal',
-  },
-};
-```
diff --git a/docs/snippets/vue/button-implementation.2.js.mdx b/docs/snippets/vue/button-implementation.2.js.mdx
deleted file mode 100644
index 95cf054cb2b6..000000000000
--- a/docs/snippets/vue/button-implementation.2.js.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
-```html
-<!-- Button.vue -->
-
-<template>
-  <!-- the component markup implementation -->
-</template>
-
-<script>
-  export default {
-    name: 'button',
-    props: {
-      /**
-       * Button contents
-       */
-      label: {
-        type: String,
-        required: true,
-      },
-      /**
-       * Is this the principal call to action on the page?
-       */
-      primary: {
-        type: Boolean,
-        default: false,
-      },
-      /**
-       * How large should the button be?
-       */
-      size: {
-        type: String,
-        default: 'medium',
-        validator: function (value) {
-          return ['small', 'medium', 'large'].indexOf(value) !== -1;
-        },
-      },
-      /**
-       * What background color to use
-       */
-      backgroundColor: {
-        type: String,
-      },
-    },
-    methods: {
-      /**
-       * Optional click handler
-       */
-      onClick() {
-        this.$emit('onClick');
-      },
-    },
-  };
-</script>
-```
diff --git a/docs/snippets/vue/button-implementation.2.ts.mdx b/docs/snippets/vue/button-implementation.2.ts.mdx
deleted file mode 100644
index 9dec664ccee5..000000000000
--- a/docs/snippets/vue/button-implementation.2.ts.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
-```html
-<!-- Button.vue -->
-
-<template>
-  <!-- the component markup implementation -->
-</template>
-
-<script lang="ts">
-  import Vue from 'vue';
-  export default Vue.extend({
-    name: 'button',
-    props: {
-      /**
-       * Button contents
-       */
-      label: {
-        type: String,
-        required: true,
-      },
-      /**
-       * Is this the principal call to action on the page?
-       */
-      primary: {
-        type: Boolean,
-        default: false,
-      },
-      /**
-       * How large should the button be?
-       */
-      size: {
-        type: String,
-        default: 'medium',
-        validator: function (value) {
-          return ['small', 'medium', 'large'].indexOf(value) !== -1;
-        },
-      },
-      /**
-       * What background color to use
-       */
-      backgroundColor: {
-        type: String,
-      },
-    },
-    methods: {
-      /**
-       * Optional click handler
-       */
-      onClick() {
-        this.$emit('onClick');
-      },
-    },
-  });
-</script>
-```
diff --git a/docs/snippets/vue/button-story-auto-docs.ts.mdx b/docs/snippets/vue/button-story-auto-docs.ts.mdx
index 5a04f54f5b22..388b6a21d49b 100644
--- a/docs/snippets/vue/button-story-auto-docs.ts.mdx
+++ b/docs/snippets/vue/button-story-auto-docs.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-click-handler-args.2.js.mdx b/docs/snippets/vue/button-story-click-handler-args.2.js.mdx
deleted file mode 100644
index 6984b666d5a3..000000000000
--- a/docs/snippets/vue/button-story-click-handler-args.2.js.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-```js
-// Button.stories.js
-
-import Button from './Button.vue';
-
-import { action } from '@storybook/addon-actions';
-
-export default {
-  component: Button,
-};
-
-export const Text = {
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { Button },
-    template: '<Button @onClick="onClick" :label="label" />',
-  }),
-  args: {
-    label: 'Hello',
-    onClick: action('clicked'),
-  },
-};
-```
diff --git a/docs/snippets/vue/button-story-click-handler-args.2.ts-4-9.mdx b/docs/snippets/vue/button-story-click-handler-args.2.ts-4-9.mdx
deleted file mode 100644
index 5863454b909a..000000000000
--- a/docs/snippets/vue/button-story-click-handler-args.2.ts-4-9.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Button from './Button.vue';
-
-import { action } from '@storybook/addon-actions';
-
-const meta = {
-  component: Button,
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Text: Story = {
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { Button },
-    template: '<Button @onClick="onClick" :label="label" />',
-  }),
-  args: {
-    label: 'Hello',
-    onClick: action('clicked'),
-  },
-};
-```
diff --git a/docs/snippets/vue/button-story-click-handler-args.2.ts.mdx b/docs/snippets/vue/button-story-click-handler-args.2.ts.mdx
deleted file mode 100644
index af71892017e1..000000000000
--- a/docs/snippets/vue/button-story-click-handler-args.2.ts.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-```ts
-// Button.stories.ts
-
-import Button from './Button.vue';
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import { action } from '@storybook/addon-actions';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Text: Story = {
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { Button },
-    template: '<Button @onClick="onClick" :label="label" />',
-  }),
-  args: {
-    label: 'Hello',
-    onClick: action('clicked'),
-  },
-};
-```
diff --git a/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx b/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
index eac7b27a4575..e0895626c1a3 100644
--- a/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
@@ -11,12 +11,6 @@ export default {
 };
 
 export const Text = {
-  render: (args) => ({
-    components: { Button },
-    setup() {
-      return { args };
-    },
-    template: '<Button v-bind="args" />',
-  }),
+  args: {},
 };
 ```
diff --git a/docs/snippets/vue/button-story-click-handler-simplificated.ts-4-9.mdx b/docs/snippets/vue/button-story-click-handler-simplificated.ts-4-9.mdx
index 296b0e375674..b6cd7e589631 100644
--- a/docs/snippets/vue/button-story-click-handler-simplificated.ts-4-9.mdx
+++ b/docs/snippets/vue/button-story-click-handler-simplificated.ts-4-9.mdx
@@ -17,12 +17,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Text: Story = {
-  render: (args) => ({
-    components: { Button },
-    setup() {
-      return { args };
-    },
-    template: '<Button v-bind="args" />',
-  }),
+  args: {},
 };
 ```
diff --git a/docs/snippets/vue/button-story-click-handler-simplificated.ts.mdx b/docs/snippets/vue/button-story-click-handler-simplificated.ts.mdx
index b85bfea9d0c1..0b8d74045f2e 100644
--- a/docs/snippets/vue/button-story-click-handler-simplificated.ts.mdx
+++ b/docs/snippets/vue/button-story-click-handler-simplificated.ts.mdx
@@ -17,12 +17,6 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Text: Story = {
-  render: (args) => ({
-    components: { Button },
-    setup() {
-      return { args };
-    },
-    template: '<Button v-bind="args" />',
-  }),
+  args: {},
 };
 ```
diff --git a/docs/snippets/vue/button-story-click-handler.2.js.mdx b/docs/snippets/vue/button-story-click-handler.2.js.mdx
deleted file mode 100644
index 856492d832d0..000000000000
--- a/docs/snippets/vue/button-story-click-handler.2.js.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-```js
-// Button.stories.js
-
-import Button from './Button.vue';
-
-import { action } from '@storybook/addon-actions';
-
-export default {
-  component: Button,
-};
-
-export const Text = {
-  render: () => ({
-    components: { Button },
-    template: '<Button label="Hello" @click="onClick" />',
-    methods: {
-      onClick: action('clicked'),
-    },
-  }),
-};
-```
diff --git a/docs/snippets/vue/button-story-click-handler.2.ts-4-9.mdx b/docs/snippets/vue/button-story-click-handler.2.ts-4-9.mdx
deleted file mode 100644
index 5616d0c44e22..000000000000
--- a/docs/snippets/vue/button-story-click-handler.2.ts-4-9.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Button from './Button.vue';
-
-import { action } from '@storybook/addon-actions';
-
-const meta = {
-  component: Button,
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Text: Story = {
-  render: () => ({
-    components: { Button },
-    template: '<Button label="Hello" @click="onClick" />',
-    methods: {
-      onClick: action('clicked'),
-    },
-  }),
-};
-```
diff --git a/docs/snippets/vue/button-story-click-handler.2.ts.mdx b/docs/snippets/vue/button-story-click-handler.2.ts.mdx
deleted file mode 100644
index 4e32db755bc1..000000000000
--- a/docs/snippets/vue/button-story-click-handler.2.ts.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Button from './Button.vue';
-
-import { action } from '@storybook/addon-actions';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Text: Story = {
-  render: () => ({
-    components: { Button },
-    template: '<Button label="Hello" @click="onClick" />',
-    methods: {
-      onClick: action('clicked'),
-    },
-  }),
-};
-```
diff --git a/docs/snippets/vue/button-story-component-args-primary.ts-4-9.mdx b/docs/snippets/vue/button-story-component-args-primary.ts-4-9.mdx
index 1c6f820e0ab2..39f8a3dc37ee 100644
--- a/docs/snippets/vue/button-story-component-args-primary.ts-4-9.mdx
+++ b/docs/snippets/vue/button-story-component-args-primary.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-component-args-primary.ts.mdx b/docs/snippets/vue/button-story-component-args-primary.ts.mdx
index 07cd0f7335a8..7b6e9c69cefe 100644
--- a/docs/snippets/vue/button-story-component-args-primary.ts.mdx
+++ b/docs/snippets/vue/button-story-component-args-primary.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-component-decorator.ts-4-9.mdx b/docs/snippets/vue/button-story-component-decorator.ts-4-9.mdx
index b486353bec9f..f2442fe3c1eb 100644
--- a/docs/snippets/vue/button-story-component-decorator.ts-4-9.mdx
+++ b/docs/snippets/vue/button-story-component-decorator.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-component-decorator.ts.mdx b/docs/snippets/vue/button-story-component-decorator.ts.mdx
index 0aa95856874f..cd4dfb6585c4 100644
--- a/docs/snippets/vue/button-story-component-decorator.ts.mdx
+++ b/docs/snippets/vue/button-story-component-decorator.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-decorator.ts-4-9.mdx b/docs/snippets/vue/button-story-decorator.ts-4-9.mdx
index 98ec477e6cd8..41f1d37a3e94 100644
--- a/docs/snippets/vue/button-story-decorator.ts-4-9.mdx
+++ b/docs/snippets/vue/button-story-decorator.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-decorator.ts.mdx b/docs/snippets/vue/button-story-decorator.ts.mdx
index 89aeb6cee7ae..54b26c0500ca 100644
--- a/docs/snippets/vue/button-story-decorator.ts.mdx
+++ b/docs/snippets/vue/button-story-decorator.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts-4-9.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts-4-9.mdx
index 0c1f576e8723..89e9c8a1686b 100644
--- a/docs/snippets/vue/button-story-default-export-with-component.ts-4-9.mdx
+++ b/docs/snippets/vue/button-story-default-export-with-component.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts.mdx
index 93f1abd5c52b..b5d6a923937a 100644
--- a/docs/snippets/vue/button-story-default-export-with-component.ts.mdx
+++ b/docs/snippets/vue/button-story-default-export-with-component.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-rename-story.ts-4-9.mdx b/docs/snippets/vue/button-story-rename-story.ts-4-9.mdx
index e51dd72a02d3..2be1459ac0b1 100644
--- a/docs/snippets/vue/button-story-rename-story.ts-4-9.mdx
+++ b/docs/snippets/vue/button-story-rename-story.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-rename-story.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts.mdx
index ec23f09014b3..3b8f6565aea2 100644
--- a/docs/snippets/vue/button-story-rename-story.ts.mdx
+++ b/docs/snippets/vue/button-story-rename-story.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-using-args.2.js.mdx b/docs/snippets/vue/button-story-using-args.2.js.mdx
deleted file mode 100644
index e99e4d0e1cb9..000000000000
--- a/docs/snippets/vue/button-story-using-args.2.js.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-```js
-// Button.stories.js
-
-import Button from './Button.vue';
-
-export default {
-  component: Button,
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" />',
-  }),
-  args: {
-    backgroundColor: '#ff0',
-    label: 'Button',
-  },
-};
-
-export const Secondary = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" />',
-  }),
-  args: {
-    ...Primary.args,
-    label: '😄👍😍💯',
-  },
-};
-
-export const Tertiary = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" />',
-  }),
-  args: {
-    ...Primary.args,
-    label: '📚📕📈🤓',
-  },
-};
-```
diff --git a/docs/snippets/vue/button-story-using-args.2.ts-4-9.mdx b/docs/snippets/vue/button-story-using-args.2.ts-4-9.mdx
deleted file mode 100644
index ede87c07f157..000000000000
--- a/docs/snippets/vue/button-story-using-args.2.ts-4-9.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Button from './Button.vue';
-
-const meta = {
-  component: Button,
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" />',
-  }),
-  args: {
-    background: '#ff0',
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" />',
-  }),
-  args: {
-    ...Primary.args,
-    label: '😄👍😍💯',
-  },
-};
-
-export const Tertiary: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" />',
-  }),
-  args: {
-    ...Primary.args,
-    label: '📚📕📈🤓',
-  },
-};
-```
diff --git a/docs/snippets/vue/button-story-using-args.2.ts.mdx b/docs/snippets/vue/button-story-using-args.2.ts.mdx
deleted file mode 100644
index 8d34d96807a3..000000000000
--- a/docs/snippets/vue/button-story-using-args.2.ts.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Button from './Button.vue';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" />',
-  }),
-  args: {
-    background: '#ff0',
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" />',
-  }),
-  args: {
-    ...Primary.args,
-    label: '😄👍😍💯',
-  },
-};
-
-export const Tertiary: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" />',
-  }),
-  args: {
-    ...Primary.args,
-    label: '📚📕📈🤓',
-  },
-};
-```
diff --git a/docs/snippets/vue/button-story-with-addon-example.ts-4-9.mdx b/docs/snippets/vue/button-story-with-addon-example.ts-4-9.mdx
index 72ecfe8d52ae..aabbb3de754f 100644
--- a/docs/snippets/vue/button-story-with-addon-example.ts-4-9.mdx
+++ b/docs/snippets/vue/button-story-with-addon-example.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-with-addon-example.ts.mdx b/docs/snippets/vue/button-story-with-addon-example.ts.mdx
index ef733b468f47..855176b847ff 100644
--- a/docs/snippets/vue/button-story-with-addon-example.ts.mdx
+++ b/docs/snippets/vue/button-story-with-addon-example.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-with-args.2.js.mdx b/docs/snippets/vue/button-story-with-args.2.js.mdx
deleted file mode 100644
index c8b4e2026fea..000000000000
--- a/docs/snippets/vue/button-story-with-args.2.js.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-```js
-// Button.stories.js
-
-import Button from './Button.vue';
-
-export default {
-  component: Button,
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" v-on="$props" />',
-  }),
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-```
diff --git a/docs/snippets/vue/button-story-with-args.2.ts-4-9.mdx b/docs/snippets/vue/button-story-with-args.2.ts-4-9.mdx
deleted file mode 100644
index 8b4fce794c6b..000000000000
--- a/docs/snippets/vue/button-story-with-args.2.ts-4-9.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Button from './Button.vue';
-
-const meta = {
-  component: Button,
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" v-on="$props" />',
-  }),
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-```
diff --git a/docs/snippets/vue/button-story-with-args.2.ts.mdx b/docs/snippets/vue/button-story-with-args.2.ts.mdx
deleted file mode 100644
index 2e1500224d00..000000000000
--- a/docs/snippets/vue/button-story-with-args.2.ts.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Button from './Button.vue';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" v-on="$props" />',
-  }),
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-```
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts-4-9.mdx b/docs/snippets/vue/button-story-with-blue-args.ts-4-9.mdx
index 1dcd6200a60b..cadffedac73b 100644
--- a/docs/snippets/vue/button-story-with-blue-args.ts-4-9.mdx
+++ b/docs/snippets/vue/button-story-with-blue-args.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts.mdx b/docs/snippets/vue/button-story-with-blue-args.ts.mdx
index 2cb562e228b6..401d45af5667 100644
--- a/docs/snippets/vue/button-story-with-blue-args.ts.mdx
+++ b/docs/snippets/vue/button-story-with-blue-args.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-with-emojis.ts-4-9.mdx b/docs/snippets/vue/button-story-with-emojis.ts-4-9.mdx
index bd6605a8a731..72d3d7c6ddcd 100644
--- a/docs/snippets/vue/button-story-with-emojis.ts-4-9.mdx
+++ b/docs/snippets/vue/button-story-with-emojis.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story-with-emojis.ts.mdx b/docs/snippets/vue/button-story-with-emojis.ts.mdx
index 1c6bd08651ff..1aabd590de60 100644
--- a/docs/snippets/vue/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/vue/button-story-with-emojis.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story.ts-4-9.mdx b/docs/snippets/vue/button-story.ts-4-9.mdx
index d63b1e16b3a1..9b3cebfd9766 100644
--- a/docs/snippets/vue/button-story.ts-4-9.mdx
+++ b/docs/snippets/vue/button-story.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/button-story.ts.mdx b/docs/snippets/vue/button-story.ts.mdx
index 80ae2b9b2c17..fd5321a92b11 100644
--- a/docs/snippets/vue/button-story.ts.mdx
+++ b/docs/snippets/vue/button-story.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/snippets/vue/component-story-figma-integration.js.mdx b/docs/snippets/vue/component-story-figma-integration.js.mdx
index f3818bef2a24..0ca8871dc1e6 100644
--- a/docs/snippets/vue/component-story-figma-integration.js.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.js.mdx
@@ -9,10 +9,6 @@ export default {
 };
 
 export const Example = {
-  render: () => ({
-    components: { MyComponent },
-    template: '<MyComponent />',
-  }),
   parameters: {
     design: {
       type: 'figma',
diff --git a/docs/snippets/vue/component-story-figma-integration.ts-4-9.mdx b/docs/snippets/vue/component-story-figma-integration.ts-4-9.mdx
index 94980d311816..83905650db3e 100644
--- a/docs/snippets/vue/component-story-figma-integration.ts-4-9.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
@@ -15,10 +14,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
-  render: () => ({
-    components: { MyComponent },
-    template: '<MyComponent />',
-  }),
   parameters: {
     design: {
       type: 'figma',
diff --git a/docs/snippets/vue/component-story-figma-integration.ts.mdx b/docs/snippets/vue/component-story-figma-integration.ts.mdx
index 16b6fb5c317a..4cdf812fc09b 100644
--- a/docs/snippets/vue/component-story-figma-integration.ts.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
@@ -15,10 +14,6 @@ export default meta;
 type Story = StoryObj<typeof MyComponent>;
 
 export const Example: Story = {
-  render: () => ({
-    components: { MyComponent },
-    template: '<MyComponent />',
-  }),
   parameters: {
     design: {
       type: 'figma',
diff --git a/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx b/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx
index 462c54498449..4c16542861a9 100644
--- a/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx
+++ b/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
diff --git a/docs/snippets/vue/component-story-highlight-addon.ts.mdx b/docs/snippets/vue/component-story-highlight-addon.ts.mdx
index 94ad9f9c0a0f..4e7cec8c0a87 100644
--- a/docs/snippets/vue/component-story-highlight-addon.ts.mdx
+++ b/docs/snippets/vue/component-story-highlight-addon.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
diff --git a/docs/snippets/vue/component-story-static-asset-cdn.ts-4-9.mdx b/docs/snippets/vue/component-story-static-asset-cdn.ts-4-9.mdx
index 8729c40fe45d..0403b1076439 100644
--- a/docs/snippets/vue/component-story-static-asset-cdn.ts-4-9.mdx
+++ b/docs/snippets/vue/component-story-static-asset-cdn.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
diff --git a/docs/snippets/vue/component-story-static-asset-cdn.ts.mdx b/docs/snippets/vue/component-story-static-asset-cdn.ts.mdx
index fa413c88c05e..53c2ff0089fc 100644
--- a/docs/snippets/vue/component-story-static-asset-cdn.ts.mdx
+++ b/docs/snippets/vue/component-story-static-asset-cdn.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
diff --git a/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx b/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx
deleted file mode 100644
index fcdd31f73fb3..000000000000
--- a/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-```js
-// MyComponent.stories.js
-
-import MyComponent from './MyComponent.vue';
-
-import imageFile from './static/image.png';
-
-export default {
-  component: MyComponent,
-};
-
-const image = {
-  src: imageFile,
-  alt: 'my image',
-};
-
-export const WithAnImage = {
-  render: () => ({
-    props: {
-      src: {
-        default: () => image.src,
-      },
-      alt: {
-        default: () => image.alt,
-      },
-    },
-    template: `<img :src="src" :alt="alt"/>`,
-  }),
-};
-```
diff --git a/docs/snippets/vue/component-story-static-asset-with-import.2.ts-4-9.mdx b/docs/snippets/vue/component-story-static-asset-with-import.2.ts-4-9.mdx
deleted file mode 100644
index 9144b3355ebc..000000000000
--- a/docs/snippets/vue/component-story-static-asset-with-import.2.ts-4-9.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
-```ts
-// MyComponent.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import MyComponent from './MyComponent.vue';
-
-import imageFile from './static/image.png';
-
-const meta = {
-  component: MyComponent,
-} satisfies Meta<typeof MyComponent>;
-
-const image = {
-  src: imageFile,
-  alt: 'my image',
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const WithAnImage: Story = {
-  render: () => ({
-    props: {
-      src: {
-        default: () => image.src,
-      },
-      alt: {
-        default: () => image.alt,
-      },
-    },
-    template: `<img :src="src" :alt="alt"/>`,
-  }),
-};
-```
diff --git a/docs/snippets/vue/component-story-static-asset-with-import.2.ts.mdx b/docs/snippets/vue/component-story-static-asset-with-import.2.ts.mdx
deleted file mode 100644
index 57b30d627ee3..000000000000
--- a/docs/snippets/vue/component-story-static-asset-with-import.2.ts.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
-```ts
-// MyComponent.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import MyComponent from './MyComponent.vue';
-
-import imageFile from './static/image.png';
-
-const meta: Meta<typeof MyComponent> = {
-  component: MyComponent,
-};
-
-const image = {
-  src: imageFile,
-  alt: 'my image',
-};
-
-export default meta;
-type Story = StoryObj<typeof MyComponent>;
-
-export const WithAnImage: Story = {
-  render: () => ({
-    props: {
-      src: {
-        default: () => image.src,
-      },
-      alt: {
-        default: () => image.alt,
-      },
-    },
-    template: `<img :src="src" :alt="alt"/>`,
-  }),
-};
-```
diff --git a/docs/snippets/vue/component-story-static-asset-without-import.ts-4-9.mdx b/docs/snippets/vue/component-story-static-asset-without-import.ts-4-9.mdx
index f4f363ef2e80..9abf2c9121cd 100644
--- a/docs/snippets/vue/component-story-static-asset-without-import.ts-4-9.mdx
+++ b/docs/snippets/vue/component-story-static-asset-without-import.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
diff --git a/docs/snippets/vue/component-story-static-asset-without-import.ts.mdx b/docs/snippets/vue/component-story-static-asset-without-import.ts.mdx
index d87da7a9a030..540c5ba6270f 100644
--- a/docs/snippets/vue/component-story-static-asset-without-import.ts.mdx
+++ b/docs/snippets/vue/component-story-static-asset-without-import.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
diff --git a/docs/snippets/vue/component-story-with-accessibility.2.js.mdx b/docs/snippets/vue/component-story-with-accessibility.2.js.mdx
deleted file mode 100644
index 4a36fc84eed0..000000000000
--- a/docs/snippets/vue/component-story-with-accessibility.2.js.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-```js
-// Button.stories.js
-
-import Button from './Button.vue';
-
-export default {
-  component: Button,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-// This is an accessible story
-export const Accessible = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" v-on="$props" />',
-  }),
-  args: {
-    primary: false,
-    label: 'Button',
-  },
-};
-
-// This is not
-export const Inaccessible = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" v-on="$props" />',
-  }),
-  args: {
-    ...Accessible.args,
-    backgroundColor: 'red',
-  },
-};
-```
diff --git a/docs/snippets/vue/component-story-with-accessibility.2.ts-4-9.mdx b/docs/snippets/vue/component-story-with-accessibility.2.ts-4-9.mdx
deleted file mode 100644
index ad1c2bda0339..000000000000
--- a/docs/snippets/vue/component-story-with-accessibility.2.ts-4-9.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Button from './Button.vue';
-
-const meta = {
-  component: Button,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// This is an accessible story
-export const Accessible: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" v-on="$props" />',
-  }),
-  args: {
-    primary: false,
-    label: 'Button',
-  },
-};
-// This is not
-export const Inaccessible: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" v-on="$props" />',
-  }),
-  args: {
-    ...Accessible.args,
-    backgroundColor: 'red',
-  },
-};
-```
diff --git a/docs/snippets/vue/component-story-with-accessibility.2.ts.mdx b/docs/snippets/vue/component-story-with-accessibility.2.ts.mdx
deleted file mode 100644
index bc6fbbaab5cf..000000000000
--- a/docs/snippets/vue/component-story-with-accessibility.2.ts.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Button from './Button.vue';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-// This is an accessible story
-export const Accessible: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" v-on="$props" />',
-  }),
-  args: {
-    primary: false,
-    label: 'Button',
-  },
-};
-// This is not
-export const Inaccessible: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Button },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" v-on="$props" />',
-  }),
-  args: {
-    ...Accessible.args,
-    backgroundColor: 'red',
-  },
-};
-```
diff --git a/docs/snippets/vue/component-story-with-accessibility.3.js.mdx b/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
index cbc23e4d7ae1..ffbf245d1c35 100644
--- a/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
@@ -12,13 +12,6 @@ export default {
 
 // This is an accessible story
 export const Accessible = {
-  render: (args) => ({
-    components: { Button },
-    setup() {
-      return { args };
-    },
-    template: '<Button v-bind="args" />',
-  }),
   args: {
     primary: false,
     label: 'Button',
@@ -27,13 +20,6 @@ export const Accessible = {
 
 // This is not
 export const Inaccessible = {
-  render: (args) => ({
-    components: { Button },
-    setup() {
-      return { args };
-    },
-    template: '<Button v-bind="args" />',
-  }),
   args: {
     ...Accessible.args,
     backgroundColor: 'red',
diff --git a/docs/snippets/vue/component-story-with-accessibility.3.ts-4-9.mdx b/docs/snippets/vue/component-story-with-accessibility.3.ts-4-9.mdx
index c8bb9abfc89e..e7ce6da59b42 100644
--- a/docs/snippets/vue/component-story-with-accessibility.3.ts-4-9.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.3.ts-4-9.mdx
@@ -17,13 +17,6 @@ type Story = StoryObj<typeof meta>;
 
 // This is an accessible story
 export const Accessible: Story = {
-  render: (args) => ({
-    components: { Button },
-    setup() {
-      return { args };
-    },
-    template: '<Button v-bind="args" />',
-  }),
   args: {
     primary: false,
     label: 'Button',
@@ -31,13 +24,6 @@ export const Accessible: Story = {
 };
 // This is not
 export const Inaccessible: Story = {
-  render: (args) => ({
-    components: { Button },
-    setup() {
-      return { args };
-    },
-    template: '<Button v-bind="args" />',
-  }),
   args: {
     ...Accessible.args,
     backgroundColor: 'red',
diff --git a/docs/snippets/vue/component-story-with-custom-render-function.ts-4-9.mdx b/docs/snippets/vue/component-story-with-custom-render-function.ts-4-9.mdx
index 53c61aef7f3f..23d5723c02d9 100644
--- a/docs/snippets/vue/component-story-with-custom-render-function.ts-4-9.mdx
+++ b/docs/snippets/vue/component-story-with-custom-render-function.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Layout from './Layout.vue';
diff --git a/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx b/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx
index bc3ddbebdea3..396a3e482e07 100644
--- a/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx
+++ b/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Layout from './Layout.vue';
diff --git a/docs/snippets/vue/csf-2-example-starter.2.js.mdx b/docs/snippets/vue/csf-2-example-starter.2.js.mdx
deleted file mode 100644
index 67ee4c020186..000000000000
--- a/docs/snippets/vue/csf-2-example-starter.2.js.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-```js
-// CSF 2
-
-import Button from './Button.vue';
-
-export default {
-  title: 'Button',
-  component: Button,
-};
-
-export const Primary = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Button },
-  template: '<Button v-bind="$props" />',
-});
-Primary.args = { primary: true };
-```
diff --git a/docs/snippets/vue/csf-2-example-starter.2.ts.mdx b/docs/snippets/vue/csf-2-example-starter.2.ts.mdx
deleted file mode 100644
index 7e36c823beae..000000000000
--- a/docs/snippets/vue/csf-2-example-starter.2.ts.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-```ts
-// CSF 2
-
-import { Meta, StoryFn } from '@storybook/vue';
-
-import Button from './Button.vue';
-
-export default {
-  title: 'Button',
-  component: Button,
-} as Meta<typeof Button>;
-
-export const Primary: StoryFn<typeof Button> = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Button },
-  template: '<Button v-bind="$props" />',
-});
-Primary.args = { primary: true };
-```
diff --git a/docs/snippets/vue/csf-2-example-story.2.js.mdx b/docs/snippets/vue/csf-2-example-story.2.js.mdx
deleted file mode 100644
index 86e7fcfa6365..000000000000
--- a/docs/snippets/vue/csf-2-example-story.2.js.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-```js
-// CSF 2
-
-// Other imports and story implementation
-export const Default = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Button },
-  template: `<Button v-bind="$props" />`,
-});
-```
diff --git a/docs/snippets/vue/csf-2-example-story.2.ts.mdx b/docs/snippets/vue/csf-2-example-story.2.ts.mdx
deleted file mode 100644
index c1dd30ba24ae..000000000000
--- a/docs/snippets/vue/csf-2-example-story.2.ts.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-```ts
-// CSF 2
-
-// Other imports and story implementation
-export const Default: StoryFn<typeof Button> = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Button },
-  template: `<Button v-bind="$props" />`,
-});
-```
diff --git a/docs/snippets/vue/csf-3-example-render.2.js.mdx b/docs/snippets/vue/csf-3-example-render.2.js.mdx
deleted file mode 100644
index 4156cc9f9a62..000000000000
--- a/docs/snippets/vue/csf-3-example-render.2.js.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-```js
-// CSF 3 - explicit render function
-
-// Other imports and story implementation
-export const Default = {
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { Button },
-    template: '<Button v-bind="$props" />',
-  }),
-};
-```
diff --git a/docs/snippets/vue/csf-3-example-render.2.ts.mdx b/docs/snippets/vue/csf-3-example-render.2.ts.mdx
deleted file mode 100644
index a10933a72a49..000000000000
--- a/docs/snippets/vue/csf-3-example-render.2.ts.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-```ts
-// CSF 3 - explicit render function
-
-// Other imports and story implementation
-export const Default: Story = {
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { Button },
-    template: '<Button v-bind="$props" />',
-  }),
-};
-```
diff --git a/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx b/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx
index eec2829fc50c..155b04789e73 100644
--- a/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx
+++ b/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
diff --git a/docs/snippets/vue/highlight-addon-custom-style.ts.mdx b/docs/snippets/vue/highlight-addon-custom-style.ts.mdx
index 34dd55cebca5..4bd686676206 100644
--- a/docs/snippets/vue/highlight-addon-custom-style.ts.mdx
+++ b/docs/snippets/vue/highlight-addon-custom-style.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
diff --git a/docs/snippets/vue/histogram-story.2.js.mdx b/docs/snippets/vue/histogram-story.2.js.mdx
deleted file mode 100644
index 1554a0108af2..000000000000
--- a/docs/snippets/vue/histogram-story.2.js.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-```js
-// Histogram.stories.js
-
-import Histogram from './Histogram.vue';
-
-export default {
-  component: Histogram,
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Default = {
-  render: (args, { argTypes }) => ({
-    components: { Histogram },
-    props: Object.keys(argTypes),
-    template: '<Histogram v-bind="$props" v-on="$props" />',
-  }),
-  args: {
-    dataType: 'latency',
-    showHistogramLabels: true,
-    histogramAccentColor: '#1EA7FD',
-    label: 'Latency distribution',
-  },
-};
-```
diff --git a/docs/snippets/vue/histogram-story.2.ts-4-9.mdx b/docs/snippets/vue/histogram-story.2.ts-4-9.mdx
deleted file mode 100644
index 5b0fd7350f0d..000000000000
--- a/docs/snippets/vue/histogram-story.2.ts-4-9.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```ts
-// Histogram.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Histogram from './Histogram.vue';
-
-const meta = {
-  component: Histogram,
-} satisfies Meta<typeof Histogram>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Default: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Histogram },
-    props: Object.keys(argTypes),
-    template: '<Histogram v-bind="$props" v-on="$props" />',
-  }),
-  args: {
-    dataType: 'latency',
-    showHistogramLabels: true,
-    histogramAccentColor: '#1EA7FD',
-    label: 'Latency distribution',
-  },
-};
-```
diff --git a/docs/snippets/vue/histogram-story.2.ts.mdx b/docs/snippets/vue/histogram-story.2.ts.mdx
deleted file mode 100644
index c31c637b9462..000000000000
--- a/docs/snippets/vue/histogram-story.2.ts.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```ts
-// Histogram.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Histogram from './Histogram.vue';
-
-const meta: Meta<typeof Histogram> = {
-  component: Histogram,
-};
-
-export default meta;
-type Story = StoryObj<typeof Histogram>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Default: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Histogram },
-    props: Object.keys(argTypes),
-    template: '<Histogram v-bind="$props" v-on="$props" />',
-  }),
-  args: {
-    dataType: 'latency',
-    showHistogramLabels: true,
-    histogramAccentColor: '#1EA7FD',
-    label: 'Latency distribution',
-  },
-};
-```
diff --git a/docs/snippets/vue/list-story-expanded.ts-4-9.mdx b/docs/snippets/vue/list-story-expanded.ts-4-9.mdx
index 3f550b5225dc..8106b3ad32f6 100644
--- a/docs/snippets/vue/list-story-expanded.ts-4-9.mdx
+++ b/docs/snippets/vue/list-story-expanded.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // List.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './ListComponent.vue';
diff --git a/docs/snippets/vue/list-story-expanded.ts.mdx b/docs/snippets/vue/list-story-expanded.ts.mdx
index eb8c470ffa2e..3e15fa7f423d 100644
--- a/docs/snippets/vue/list-story-expanded.ts.mdx
+++ b/docs/snippets/vue/list-story-expanded.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // List.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './ListComponent.vue';
diff --git a/docs/snippets/vue/list-story-reuse-data.2.js.mdx b/docs/snippets/vue/list-story-reuse-data.2.js.mdx
deleted file mode 100644
index 69fdb85ab9df..000000000000
--- a/docs/snippets/vue/list-story-reuse-data.2.js.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
-```js
-// List.stories.js
-
-import List from './ListComponent.vue';
-import ListItem from './ListItem.vue';
-
-//👇 We're importing the necessary stories from ListItem
-import { Selected, Unselected } from './ListItem.stories';
-
-export default {
-  component: List,
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const ManyItems = {
-  render: (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>`,
-  }),
-  args: {
-    Selected: Selected.args.isSelected,
-    Unselected: Unselected.args.isSelected,
-  },
-};
-```
diff --git a/docs/snippets/vue/list-story-reuse-data.2.ts-4-9.mdx b/docs/snippets/vue/list-story-reuse-data.2.ts-4-9.mdx
deleted file mode 100644
index 93782842f166..000000000000
--- a/docs/snippets/vue/list-story-reuse-data.2.ts-4-9.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-```ts
-// List.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import List from './ListComponent.vue';
-import ListItem from './ListItem.vue';
-
-//👇 We're importing the necessary stories from ListItem
-import { Selected, Unselected } from './ListItem.stories';
-
-const meta = {
-  component: List,
-} satisfies Meta<typeof List>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const ManyItems: Story = {
-  render: (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>`,
-  }),
-  args: {
-    Selected: Selected.args.isSelected,
-    Unselected: Unselected.args.isSelected,
-  },
-};
-```
diff --git a/docs/snippets/vue/list-story-reuse-data.2.ts.mdx b/docs/snippets/vue/list-story-reuse-data.2.ts.mdx
deleted file mode 100644
index 5a5859000d93..000000000000
--- a/docs/snippets/vue/list-story-reuse-data.2.ts.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-```ts
-// List.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import List from './ListComponent.vue';
-import ListItem from './ListItem.vue';
-
-//👇 We're importing the necessary stories from ListItem
-import { Selected, Unselected } from './ListItem.stories';
-
-const meta: Meta<typeof List> = {
-  component: List,
-};
-
-export default meta;
-type Story = StoryObj<typeof List>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const ManyItems: Story = {
-  render: (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>`,
-  }),
-  args: {
-    Selected: Selected.args.isSelected,
-    Unselected: Unselected.args.isSelected,
-  },
-};
-```
diff --git a/docs/snippets/vue/list-story-starter.ts-4-9.mdx b/docs/snippets/vue/list-story-starter.ts-4-9.mdx
index a2fdcbac82fe..941e3d9c736a 100644
--- a/docs/snippets/vue/list-story-starter.ts-4-9.mdx
+++ b/docs/snippets/vue/list-story-starter.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // List.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './ListComponent.vue';
@@ -15,9 +14,9 @@ type Story = StoryObj<typeof meta>;
 
 // Always an empty list, not super interesting
 export const Empty: Story = {
-  render: (args) => ({
+  render: () => ({
     components: { List },
-    template: '<List />',
+    template: '<List/>',
   }),
 };
 ```
diff --git a/docs/snippets/vue/list-story-starter.ts.mdx b/docs/snippets/vue/list-story-starter.ts.mdx
index a8e45ef4ace6..2d3c6d52e09d 100644
--- a/docs/snippets/vue/list-story-starter.ts.mdx
+++ b/docs/snippets/vue/list-story-starter.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // List.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './ListComponent.vue';
diff --git a/docs/snippets/vue/list-story-template.2.js.mdx b/docs/snippets/vue/list-story-template.2.js.mdx
deleted file mode 100644
index 1f82de6166a9..000000000000
--- a/docs/snippets/vue/list-story-template.2.js.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
-```js
-// List.stories.js
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-//👇 Imports a specific story from ListItem stories
-import { Unchecked } from './ListItem.stories';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
-  component: List,
-};
-
-//👇 The ListTemplate construct will be spread to the existing stories.
-const ListTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { List, ListItem },
-  template: `
-    <List v-bind="$props">
-      <div v-for="item in items" :key="item.title">
-        <ListItem :item="item" />
-      </div>
-    </List>
-    `,
-});
-
-export const Empty = {
-  ...ListTemplate,
-  args: {
-    items: [],
-  },
-};
-
-export const OneItem = {
-  ...ListTemplate,
-  args: {
-    items: [
-      {
-        ...Unchecked.args,
-      },
-    ],
-  },
-};
-```
diff --git a/docs/snippets/vue/list-story-template.2.ts-4-9.mdx b/docs/snippets/vue/list-story-template.2.ts-4-9.mdx
deleted file mode 100644
index 64cfa292b9b9..000000000000
--- a/docs/snippets/vue/list-story-template.2.ts-4-9.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
-```ts
-// List.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-//👇 Imports a specific story from ListItem stories
-import { Unchecked } from './ListItem.stories';
-
-const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
-  component: List,
-} satisfies Meta<typeof List>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-//👇 The ListTemplate construct will be spread to the existing stories.
-const ListTemplate = {
-  render: (args, { argTypes }) => ({
-    components: { List, ListItem },
-    props: Object.keys(argTypes),
-    template: `
-      <List v-bind="$props">
-        <div v-for="item in items" :key="item.title">
-          <ListItem :item="item" />
-        </div>
-      </List>
-    `,
-  }),
-};
-
-export const Empty: Story = {
-  ...ListTemplate,
-  args: {
-    items: [],
-  },
-};
-
-export const OneItem: Story = {
-  ...ListTemplate,
-  args: {
-    items: [
-      {
-        ...Unchecked.args,
-      },
-    ],
-  },
-};
-```
diff --git a/docs/snippets/vue/list-story-template.2.ts.mdx b/docs/snippets/vue/list-story-template.2.ts.mdx
deleted file mode 100644
index 9ba684aade8c..000000000000
--- a/docs/snippets/vue/list-story-template.2.ts.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
-```ts
-// List.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-//👇 Imports a specific story from ListItem stories
-import { Unchecked } from './ListItem.stories';
-
-const meta: Meta<typeof List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
-  component: List,
-};
-
-export default meta;
-type Story = StoryObj<typeof List>;
-
-//👇 The ListTemplate construct will be spread to the existing stories.
-const ListTemplate = {
-  render: (args, { argTypes }) => ({
-    components: { List, ListItem },
-    props: Object.keys(argTypes),
-    template: `
-      <List v-bind="$props">
-        <div v-for="item in items" :key="item.title">
-          <ListItem :item="item" />
-        </div>
-      </List>
-    `,
-  }),
-};
-
-export const Empty: Story = {
-  ...ListTemplate,
-  args: {
-    items: [],
-  },
-};
-
-export const OneItem: Story = {
-  ...ListTemplate,
-  args: {
-    items: [
-      {
-        ...Unchecked.args,
-      },
-    ],
-  },
-};
-```
diff --git a/docs/snippets/vue/list-story-unchecked.2.js.mdx b/docs/snippets/vue/list-story-unchecked.2.js.mdx
deleted file mode 100644
index 748e5724ae6f..000000000000
--- a/docs/snippets/vue/list-story-unchecked.2.js.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```js
-// List.stories.js
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-//👇 Imports a specific story from ListItem stories
-import { Unchecked } from './ListItem.stories';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
-  component: List,
-};
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const OneItem = {
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { List, ListItem },
-    template: '<List v-bind="$props"><ListItem v-bind="$props"/></List>',
-  }),
-  args: {
-    ...Unchecked.args,
-  },
-};
-```
diff --git a/docs/snippets/vue/list-story-unchecked.2.ts-4-9.mdx b/docs/snippets/vue/list-story-unchecked.2.ts-4-9.mdx
deleted file mode 100644
index c32d7c94eb11..000000000000
--- a/docs/snippets/vue/list-story-unchecked.2.ts-4-9.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```ts
-// List.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-//👇 Imports a specific story from ListItem stories
-import { Unchecked } from './ListItem.stories';
-
-const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
-  component: List,
-} satisfies Meta<typeof List>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const OneItem: Story = {
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { List, ListItem },
-    template: '<List v-bind="$props"><ListItem v-bind="$props"/></List>',
-  }),
-  args: {
-    ...Unchecked.args,
-  },
-};
-```
diff --git a/docs/snippets/vue/list-story-unchecked.2.ts.mdx b/docs/snippets/vue/list-story-unchecked.2.ts.mdx
deleted file mode 100644
index 49ecf7c6d9f8..000000000000
--- a/docs/snippets/vue/list-story-unchecked.2.ts.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```ts
-// List.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-//👇 Imports a specific story from ListItem stories
-import { Unchecked } from './ListItem.stories';
-
-const meta: Meta<typeof List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
-  component: List,
-};
-
-export default meta;
-type Story = StoryObj<typeof List>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const OneItem: Story = {
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { List, ListItem },
-    template: '<List v-bind="$props"><ListItem v-bind="$props"/></List>',
-  }),
-  args: {
-    ...Unchecked.args,
-  },
-};
-```
diff --git a/docs/snippets/vue/login-form-with-play-function.ts-4-9.mdx b/docs/snippets/vue/login-form-with-play-function.ts-4-9.mdx
index 6f3f8442b325..8bf2b34cd899 100644
--- a/docs/snippets/vue/login-form-with-play-function.ts-4-9.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // LoginForm.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import { userEvent, within, expect } from '@storybook/test';
diff --git a/docs/snippets/vue/login-form-with-play-function.ts.mdx b/docs/snippets/vue/login-form-with-play-function.ts.mdx
index f3f1fd86a9e1..31ecb38035f2 100644
--- a/docs/snippets/vue/login-form-with-play-function.ts.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // LoginForm.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import { userEvent, within, expect } from '@storybook/test';
diff --git a/docs/snippets/vue/my-component-story-basic-and-props.ts-4-9.mdx b/docs/snippets/vue/my-component-story-basic-and-props.ts-4-9.mdx
index dfe13e09018d..dcaa9e7e5f48 100644
--- a/docs/snippets/vue/my-component-story-basic-and-props.ts-4-9.mdx
+++ b/docs/snippets/vue/my-component-story-basic-and-props.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
diff --git a/docs/snippets/vue/my-component-story-basic-and-props.ts.mdx b/docs/snippets/vue/my-component-story-basic-and-props.ts.mdx
index 48c8f1e24119..9f64968035dd 100644
--- a/docs/snippets/vue/my-component-story-basic-and-props.ts.mdx
+++ b/docs/snippets/vue/my-component-story-basic-and-props.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
diff --git a/docs/snippets/vue/my-component-story-configure-viewports.js.mdx b/docs/snippets/vue/my-component-story-configure-viewports.js.mdx
index aff73e0bde98..f7a38b413a95 100644
--- a/docs/snippets/vue/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/vue/my-component-story-configure-viewports.js.mdx
@@ -20,10 +20,6 @@ export default {
 };
 
 export const MyStory = {
-  render: () => ({
-    components: { MyComponent },
-    template: '<MyComponent />',
-  }),
   parameters: {
     viewport: {
       defaultViewport: 'iphonex',
diff --git a/docs/snippets/vue/my-component-story-configure-viewports.ts-4-9.mdx b/docs/snippets/vue/my-component-story-configure-viewports.ts-4-9.mdx
index 54b88d011534..952bafb73b91 100644
--- a/docs/snippets/vue/my-component-story-configure-viewports.ts-4-9.mdx
+++ b/docs/snippets/vue/my-component-story-configure-viewports.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
@@ -26,10 +25,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const MyStory: Story = {
-  render: () => ({
-    components: { MyComponent },
-    template: '<MyComponent />',
-  }),
   parameters: {
     viewport: {
       defaultViewport: 'iphonex',
diff --git a/docs/snippets/vue/my-component-story-configure-viewports.ts.mdx b/docs/snippets/vue/my-component-story-configure-viewports.ts.mdx
index af4762a8f9f7..091a3631305b 100644
--- a/docs/snippets/vue/my-component-story-configure-viewports.ts.mdx
+++ b/docs/snippets/vue/my-component-story-configure-viewports.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
@@ -26,10 +25,6 @@ export default meta;
 type Story = StoryObj<typeof MyComponent>;
 
 export const MyStory: Story = {
-  render: () => ({
-    components: { MyComponent },
-    template: '<MyComponent />',
-  }),
   parameters: {
     viewport: {
       defaultViewport: 'iphonex',
diff --git a/docs/snippets/vue/my-component-story-use-globaltype.ts-4-9.mdx b/docs/snippets/vue/my-component-story-use-globaltype.ts-4-9.mdx
index 0efbeca17bc1..f9f473a290e8 100644
--- a/docs/snippets/vue/my-component-story-use-globaltype.ts-4-9.mdx
+++ b/docs/snippets/vue/my-component-story-use-globaltype.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
diff --git a/docs/snippets/vue/my-component-story-use-globaltype.ts.mdx b/docs/snippets/vue/my-component-story-use-globaltype.ts.mdx
index 73c71c3b6d6a..e13eb36f4002 100644
--- a/docs/snippets/vue/my-component-story-use-globaltype.ts.mdx
+++ b/docs/snippets/vue/my-component-story-use-globaltype.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
diff --git a/docs/snippets/vue/my-component-story-with-nonstory.ts-4-9.mdx b/docs/snippets/vue/my-component-story-with-nonstory.ts-4-9.mdx
index 3a9ae44502ee..458342aa2c63 100644
--- a/docs/snippets/vue/my-component-story-with-nonstory.ts-4-9.mdx
+++ b/docs/snippets/vue/my-component-story-with-nonstory.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
diff --git a/docs/snippets/vue/my-component-story-with-nonstory.ts.mdx b/docs/snippets/vue/my-component-story-with-nonstory.ts.mdx
index 52dd9dc71837..f84387793c72 100644
--- a/docs/snippets/vue/my-component-story-with-nonstory.ts.mdx
+++ b/docs/snippets/vue/my-component-story-with-nonstory.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
diff --git a/docs/snippets/vue/page-story-slots.2.js.mdx b/docs/snippets/vue/page-story-slots.2.js.mdx
deleted file mode 100644
index cd3774707be6..000000000000
--- a/docs/snippets/vue/page-story-slots.2.js.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-```js
-// Page.stories.js
-
-import Page from './Page.vue';
-
-export default {
-  component: Page,
-  render: (args, { argTypes }) => ({
-    components: { Page },
-    props: Object.keys(argTypes),
-    template: `
-      <page v-bind="$props">
-        <template v-slot:footer>
-          <footer v-if="footer" v-html="footer"/>
-        </template>
-      </page>
-    `,
-  }),
-};
-
-export const CustomFooter = {
-  args: {
-    footer: 'Built with Storybook',
-  },
-};
-```
diff --git a/docs/snippets/vue/page-story-slots.2.ts-4-9.mdx b/docs/snippets/vue/page-story-slots.2.ts-4-9.mdx
deleted file mode 100644
index 2d6c35078af6..000000000000
--- a/docs/snippets/vue/page-story-slots.2.ts-4-9.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
-```ts
-// Page.stories.ts
-
-// https://www.npmjs.com/package/vue-component-type-helpers
-import type { ComponentProps } from 'vue-component-type-helpers';
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Page from './Page.vue';
-
-type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
-
-const meta = {
-  component: Page,
-  render: (args, { argTypes }) => ({
-    components: { Page },
-    props: Object.keys(argTypes),
-    template: `
-      <page v-bind="$props">
-        <template v-slot:footer>
-          <footer v-if="footer" v-html="footer"/>
-        </template>
-      </page>
-    `,
-  }),
-} satisfies Meta<PagePropsAndCustomArgs>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary = {
-  args: {
-    footer: 'Built with Storybook',
-  },
-} satisfies Story;
-```
diff --git a/docs/snippets/vue/page-story-slots.2.ts.mdx b/docs/snippets/vue/page-story-slots.2.ts.mdx
deleted file mode 100644
index b43d05f9b85e..000000000000
--- a/docs/snippets/vue/page-story-slots.2.ts.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
-```ts
-// Page.stories.ts
-
-// https://www.npmjs.com/package/vue-component-type-helpers
-import type { ComponentProps } from 'vue-component-type-helpers';
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Page from './Page.vue';
-
-type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
-
-const meta: Meta<PagePropsAndCustomArgs> = {
-  component: Page,
-  render: (args, { argTypes }) => ({
-    components: { Page },
-    props: Object.keys(argTypes),
-    template: `
-      <page v-bind="$props">
-        <template v-slot:footer>
-          <footer v-if="footer" v-html="footer"/>
-        </template>
-      </page>
-    `,
-  }),
-};
-export default meta;
-
-type Story = StoryObj<PagePropsAndCustomArgs>;
-
-export const Primary: Story = {
-  args: {
-    footer: 'Built with Storybook',
-  },
-};
-```
diff --git a/docs/snippets/vue/page-story.2.-ts-4-9.mdx b/docs/snippets/vue/page-story.2.-ts-4-9.mdx
deleted file mode 100644
index cfc4f0843390..000000000000
--- a/docs/snippets/vue/page-story.2.-ts-4-9.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```ts
-// Page.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Page from './Page.vue';
-
-//👇 Imports all Header stories
-import * as HeaderStories from './Header.stories';
-
-const meta = {
-  component: Page,
-} satisfies Meta<typeof Table>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Page },
-    props: Object.keys(argTypes),
-    template: '<page v-bind="$props" />',
-  }),
-  args: {
-    ...HeaderStories.LoggedIn.args,
-  },
-};
-```
diff --git a/docs/snippets/vue/page-story.2.js.mdx b/docs/snippets/vue/page-story.2.js.mdx
deleted file mode 100644
index 9b5ab6893dc3..000000000000
--- a/docs/snippets/vue/page-story.2.js.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-```js
-// Page.stories.js
-
-import Page from './Page.vue';
-
-//👇 Imports all Header stories
-import * as HeaderStories from './Header.stories';
-
-export default {
-  component: Page,
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const LoggedIn = {
-  render: (args, { argTypes }) => ({
-    components: { Page },
-    props: Object.keys(argTypes),
-    template: '<page v-bind="$props" />',
-  }),
-  args: {
-    ...HeaderStories.LoggedIn.args,
-  },
-};
-```
diff --git a/docs/snippets/vue/page-story.2.ts.mdx b/docs/snippets/vue/page-story.2.ts.mdx
deleted file mode 100644
index 7715c422feaa..000000000000
--- a/docs/snippets/vue/page-story.2.ts.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```ts
-// Page.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import Page from './Page.vue';
-
-//👇 Imports all Header stories
-import * as HeaderStories from './Header.stories';
-
-const meta: Meta<typeof Page> = {
-  component: Page,
-};
-
-export default meta;
-type Story = StoryObj<typeof Page>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: (args, { argTypes }) => ({
-    components: { Page },
-    props: Object.keys(argTypes),
-    template: '<page v-bind="$props" />',
-  }),
-  args: {
-    ...HeaderStories.LoggedIn.args,
-  },
-};
-```
diff --git a/docs/snippets/vue/simple-page-implementation.2.js.mdx b/docs/snippets/vue/simple-page-implementation.2.js.mdx
deleted file mode 100644
index bbe99159d968..000000000000
--- a/docs/snippets/vue/simple-page-implementation.2.js.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```html
-<!-- YourPage.vue -->
-
-<template>
-  <PageLayout :user="user">
-    <DocumentHeader :document="document" />
-    <DocumentList :documents="subdocuments" />
-  </PageLayout>
-</template>
-
-<script>
-  import PageLayout from './PageLayout';
-  import DocumentHeader from './DocumentHeader';
-  import DocumentList from './DocumentList';
-
-  export default {
-    name: 'DocumentScreen',
-    components: { PageLayout, DocumentHeader, DocumentList },
-    props: {
-      user: {
-        type: String,
-        default: 'N/A',
-      },
-      document: {
-        type: Object,
-        default: () => ({
-          id: 1,
-          title: 'A document',
-          content: 'Lorem Ipsum',
-        }),
-      },
-      subdocuments: {
-        type: Array,
-        default: () => [],
-      },
-    },
-  };
-</script>
-```
diff --git a/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx b/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx
index 631dea64662a..8b3dd92a3905 100644
--- a/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx
+++ b/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx
@@ -8,10 +8,6 @@ export default {
 };
 
 export const NonA11yStory = {
-  render: () => ({
-    components: { MyComponent },
-    template: '<MyComponent/>',
-  }),
   parameters: {
     a11y: {
       // This option disables all a11y checks on this story
diff --git a/docs/snippets/vue/storybook-addon-a11y-disable.ts-4-9.mdx b/docs/snippets/vue/storybook-addon-a11y-disable.ts-4-9.mdx
index d3e6630cb085..4dcb458dae3d 100644
--- a/docs/snippets/vue/storybook-addon-a11y-disable.ts-4-9.mdx
+++ b/docs/snippets/vue/storybook-addon-a11y-disable.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
@@ -14,10 +13,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const NonA11yStory: Story = {
-  render: () => ({
-    components: { MyComponent },
-    template: '<MyComponent/>',
-  }),
   parameters: {
     a11y: {
       // This option disables all a11y checks on this story
diff --git a/docs/snippets/vue/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/vue/storybook-addon-a11y-disable.ts.mdx
index 27a59ab15167..cd460d53556b 100644
--- a/docs/snippets/vue/storybook-addon-a11y-disable.ts.mdx
+++ b/docs/snippets/vue/storybook-addon-a11y-disable.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
@@ -14,10 +13,6 @@ export default meta;
 type Story = StoryObj<typeof MyComponent>;
 
 export const NonA11yStory: Story = {
-  render: () => ({
-    components: { MyComponent },
-    template: '<MyComponent/>',
-  }),
   parameters: {
     a11y: {
       // This option disables all a11y checks on this story
diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
index 56bf00f7f3b5..c0af1c56297b 100644
--- a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
+++ b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
@@ -8,10 +8,6 @@ export default {
 };
 
 export const ExampleStory = {
-  render: () => ({
-    components: { MyComponent },
-    template: '<MyComponent/>',
-  }),
   parameters: {
     a11y: {
       element: '#storybook-root',
diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.ts-4-9.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.ts-4-9.mdx
index 7ae20fed5fc1..b990a1f2db4c 100644
--- a/docs/snippets/vue/storybook-addon-a11y-story-config.ts-4-9.mdx
+++ b/docs/snippets/vue/storybook-addon-a11y-story-config.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
@@ -14,10 +13,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const ExampleStory = {
-  render: () => ({
-    components: { MyComponent },
-    template: '<MyComponent/>',
-  }),
   parameters: {
     a11y: {
       element: '#storybook-root',
diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.ts.mdx
index e2239aaae692..46fe6190dbcd 100644
--- a/docs/snippets/vue/storybook-addon-a11y-story-config.ts.mdx
+++ b/docs/snippets/vue/storybook-addon-a11y-story-config.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // MyComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
@@ -14,10 +13,6 @@ export default meta;
 type Story = StoryObj<typeof MyComponent>;
 
 export const ExampleStory = {
-  render: () => ({
-    components: { MyComponent },
-    template: '<MyComponent/>',
-  }),
   parameters: {
     a11y: {
       element: '#storybook-root',
diff --git a/docs/snippets/vue/storybook-preview-global-decorator.ts.mdx b/docs/snippets/vue/storybook-preview-global-decorator.ts.mdx
index 57a70d270b5e..5b223b160a42 100644
--- a/docs/snippets/vue/storybook-preview-global-decorator.ts.mdx
+++ b/docs/snippets/vue/storybook-preview-global-decorator.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // .storybook/preview.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import { Preview } from '@storybook/vue3';
 
 const preview: Preview = {
diff --git a/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.component-2.js.mdx b/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.component-2.js.mdx
deleted file mode 100644
index b18c4b20a856..000000000000
--- a/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.component-2.js.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-```js
-// .storybook/preview.js
-
-import Vue from 'vue';
-
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-
-library.add(fasPlusSquare);
-
-//👇 Storybook Vue app being extended and registering the component
-Vue.component('font-awesome-icon', FontAwesomeIcon);
-
-export default {
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div style="margin: 3em;"><story /></div>',
-    }),
-  ],
-};
-```
diff --git a/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.component-2.ts.mdx b/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.component-2.ts.mdx
deleted file mode 100644
index 12b8ff71ef1f..000000000000
--- a/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.component-2.ts.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-```ts
-// .storybook/preview.ts
-
-import Vue from 'vue';
-
-import { Preview } from '@storybook/vue';
-
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-
-library.add(fasPlusSquare);
-
-//👇 Storybook Vue app being extended and registering the component
-Vue.component('font-awesome-icon', FontAwesomeIcon);
-
-const preview: Preview = {
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div style="margin: 3em;"><story /></div>',
-    }),
-  ],
-};
-
-export default preview;
-```
diff --git a/docs/snippets/vue/storybook-preview-with-library-decorator.library-2.js.mdx b/docs/snippets/vue/storybook-preview-with-library-decorator.library-2.js.mdx
deleted file mode 100644
index c561a61c08a7..000000000000
--- a/docs/snippets/vue/storybook-preview-with-library-decorator.library-2.js.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-```js
-// .storybook/preview.js
-
-import Vue from 'vue';
-
-import Vuex from 'vuex';
-
-//👇 Storybook Vue app being extended and registering the library
-Vue.use(Vuex);
-
-export default {
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div style="margin: 3em;"><story /></div>',
-    }),
-  ],
-};
-```
diff --git a/docs/snippets/vue/storybook-preview-with-library-decorator.library-2.ts.mdx b/docs/snippets/vue/storybook-preview-with-library-decorator.library-2.ts.mdx
deleted file mode 100644
index 781cd5e956a3..000000000000
--- a/docs/snippets/vue/storybook-preview-with-library-decorator.library-2.ts.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-```ts
-// .storybook/preview.ts
-
-import Vue from 'vue';
-
-import Vuex from 'vuex';
-
-import { Preview } from '@storybook/vue';
-
-//👇 Storybook Vue app being extended and registering the library
-Vue.use(Vuex);
-
-const preview: Preview = {
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div style="margin: 3em;"><story /></div>',
-    }),
-  ],
-};
-
-export default preview;
-```
diff --git a/docs/snippets/vue/storybook-preview-with-mixin-decorator.mixin-2.js.mdx b/docs/snippets/vue/storybook-preview-with-mixin-decorator.mixin-2.js.mdx
deleted file mode 100644
index e6665902d88a..000000000000
--- a/docs/snippets/vue/storybook-preview-with-mixin-decorator.mixin-2.js.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-```js
-// .storybook/preview.js
-
-import Vue from 'vue';
-
-//👇 Storybook Vue app being extended and registering the mixin
-Vue.mixin({
-  // Your mixin code
-});
-
-export default {
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div style="margin: 3em;"><story /></div>',
-    }),
-  ],
-};
-```
diff --git a/docs/snippets/vue/storybook-preview-with-mixin-decorator.mixin-2.ts.mdx b/docs/snippets/vue/storybook-preview-with-mixin-decorator.mixin-2.ts.mdx
deleted file mode 100644
index da1bed3368e1..000000000000
--- a/docs/snippets/vue/storybook-preview-with-mixin-decorator.mixin-2.ts.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-```ts
-// .storybook/preview.ts
-
-import Vue from 'vue';
-
-import { Preview } from '@storybook/vue';
-
-//👇 Storybook Vue app being extended and registering the mixin
-Vue.mixin({
-  // Your mixin code
-});
-
-const preview: Preview = {
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div style="margin: 3em;"><story /></div>',
-    }),
-  ],
-};
-
-export default preview;
-```
diff --git a/docs/snippets/vue/storybook-testing-addon-optional-config.2.js.mdx b/docs/snippets/vue/storybook-testing-addon-optional-config.2.js.mdx
deleted file mode 100644
index a02ceae53147..000000000000
--- a/docs/snippets/vue/storybook-testing-addon-optional-config.2.js.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-```js
-// setupFile.js
-
-import { setGlobalConfig } from '@storybook/testing-vue';
-
-// Storybook's preview file location
-import * as globalStorybookConfig from './.storybook/preview';
-
-setGlobalConfig(globalStorybookConfig);
-```
diff --git a/docs/snippets/vue/your-component-with-decorator.ts-4-9.mdx b/docs/snippets/vue/your-component-with-decorator.ts-4-9.mdx
index 2ef17e7d20a7..e45d5df94929 100644
--- a/docs/snippets/vue/your-component-with-decorator.ts-4-9.mdx
+++ b/docs/snippets/vue/your-component-with-decorator.ts-4-9.mdx
@@ -1,7 +1,6 @@
 ```ts
 // YourComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta } from '@storybook/vue3';
 
 import YourComponent from './YourComponent.vue';
diff --git a/docs/snippets/vue/your-component-with-decorator.ts.mdx b/docs/snippets/vue/your-component-with-decorator.ts.mdx
index a67b925bf130..1cb1aad6a363 100644
--- a/docs/snippets/vue/your-component-with-decorator.ts.mdx
+++ b/docs/snippets/vue/your-component-with-decorator.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // YourComponent.stories.ts
 
-// Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta } from '@storybook/vue3';
 
 import YourComponent from './YourComponent.vue';
diff --git a/docs/snippets/vue/your-component.2.js.mdx b/docs/snippets/vue/your-component.2.js.mdx
deleted file mode 100644
index d9d14d4dadeb..000000000000
--- a/docs/snippets/vue/your-component.2.js.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-```js
-// YourComponent.stories.js
-
-import YourComponent from './YourComponent.vue';
-
-//👇 This default export determines where your story goes in the story list
-export default {
-  component: YourComponent,
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const FirstStory = {
-  render: (args, { argTypes }) => ({
-    components: { YourComponent },
-    props: Object.keys(argTypes),
-    template: '<Button v-bind="$props" />',
-  }),
-  args: {
-    //👇 The args you need here will depend on your component
-  },
-};
-```
diff --git a/docs/snippets/vue/your-component.2.ts-4-9.mdx b/docs/snippets/vue/your-component.2.ts-4-9.mdx
deleted file mode 100644
index 21fb29d0a752..000000000000
--- a/docs/snippets/vue/your-component.2.ts-4-9.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
-```ts
-// YourComponent.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import YourComponent from './YourComponent.vue';
-
-const meta = {
-  component: YourComponent,
-} satisfies Meta<typeof YourComponent>;
-
-//👇 This default export determines where your story goes in the story list
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const FirstStory: Story = {
-  render: (args, { argTypes }) => ({
-    components: { YourComponent },
-    props: Object.keys(argTypes),
-    template: '<YourComponent v-bind="$props" />',
-  }),
-  args: {
-    //👇 The args you need here will depend on your component
-  },
-};
-```
diff --git a/docs/snippets/vue/your-component.2.ts.mdx b/docs/snippets/vue/your-component.2.ts.mdx
deleted file mode 100644
index be0ab64151f8..000000000000
--- a/docs/snippets/vue/your-component.2.ts.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
-```ts
-// YourComponent.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue';
-
-import YourComponent from './YourComponent.vue';
-
-const meta: Meta<typeof YourComponent> = {
-  component: YourComponent,
-};
-
-//👇 This default export determines where your story goes in the story list
-export default meta;
-type Story = StoryObj<typeof YourComponent>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const FirstStory: Story = {
-  render: (args, { argTypes }) => ({
-    components: { YourComponent },
-    props: Object.keys(argTypes),
-    template: '<YourComponent v-bind="$props" />',
-  }),
-  args: {
-    //👇 The args you need here will depend on your component
-  },
-};
-```
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 5a3d7cbd14a6..06988980bc58 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -24,8 +24,6 @@ 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.2.js.mdx',
-    'vue/button-story-with-args.2.ts.mdx',
     'vue/button-story-with-args.3.js.mdx',
     'vue/button-story-with-args.3.ts.mdx',
     'angular/button-story-with-args.ts.mdx',
@@ -147,8 +145,6 @@ Args are useful when writing stories for composite components that are assembled
     'react/page-story.js.mdx',
     'react/page-story.ts.mdx',
     'angular/page-story.ts.mdx',
-    'vue/page-story.2.js.mdx',
-    'vue/page-story.2.ts.mdx',
     'vue/page-story.3.js.mdx',
     'vue/page-story.3.ts.mdx',
     'web-components/page-story.js.mdx',
@@ -178,8 +174,6 @@ You can use args in your stories to configure the component's appearance, simila
   paths={[
     'react/page-story-slots.js.mdx',
     'react/page-story-slots.ts.mdx',
-    'vue/page-story-slots.2.js.mdx',
-    'vue/page-story-slots.2.ts.mdx',
     'vue/page-story-slots.3.js.mdx',
     'vue/page-story-slots.3.ts.mdx',
     'angular/page-story-slots.ts.mdx',
diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
index fecddea8921a..aeb293e09fc8 100644
--- a/docs/writing-stories/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -38,7 +38,6 @@ 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.js.mdx',
     'vue/simple-page-implementation.3.js.mdx',
     'angular/simple-page-implementation.ts.mdx',
     'web-components/simple-page-implementation.js.mdx',
diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md
index 3f213ca28058..8c3160302cf8 100644
--- a/docs/writing-stories/decorators.md
+++ b/docs/writing-stories/decorators.md
@@ -50,16 +50,10 @@ For example, if you're working with React's Styled Components and your component
   paths={[
     'react/storybook-preview-with-styled-components-decorator.js.mdx',
     'react/storybook-preview-with-styled-components-decorator.ts.mdx',
-    'vue/storybook-preview-with-library-decorator.library-2.js.mdx',
-    'vue/storybook-preview-with-library-decorator.library-2.ts.mdx',
     'vue/storybook-preview-with-library-decorator.library-3.js.mdx',
     'vue/storybook-preview-with-library-decorator.library-3.ts.mdx',
-    'vue/storybook-preview-with-hoc-component-decorator.component-2.js.mdx',
-    'vue/storybook-preview-with-hoc-component-decorator.component-2.ts.mdx',
     'vue/storybook-preview-with-hoc-component-decorator.component-3.js.mdx',
     'vue/storybook-preview-with-hoc-component-decorator.component-3.ts.mdx',
-    'vue/storybook-preview-with-mixin-decorator.mixin-2.js.mdx',
-    'vue/storybook-preview-with-mixin-decorator.mixin-2.ts.mdx',
     'angular/add-localize-package-to-polyfills.ts.mdx',
     'angular/storybook-preview-with-angular-polyfills.js.mdx',
     'solid/storybook-preview-with-styled-components-decorator.js.mdx',
@@ -82,7 +76,7 @@ The second argument to a decorator function is the **story context** which in pa
 
 <Callout variant="info" icon="💡">
 
-This pattern can also be applied to your own stories. Some of Storybook's supported frameworks already use it (e.g., vue 2).
+This pattern can also be applied to your own stories. Some of Storybook's supported frameworks already use it (e.g., Vue 3).
 
 </Callout>
 
diff --git a/docs/writing-stories/index.md b/docs/writing-stories/index.md
index a270dd95b1e1..b2ace462d5d8 100644
--- a/docs/writing-stories/index.md
+++ b/docs/writing-stories/index.md
@@ -207,8 +207,6 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
   paths={[
     'react/button-story-using-args.js.mdx',
     'react/button-story-using-args.ts.mdx',
-    'vue/button-story-using-args.2.js.mdx',
-    'vue/button-story-using-args.2.ts.mdx',
     'vue/button-story-using-args.3.js.mdx',
     'vue/button-story-using-args.3.ts.mdx',
     'angular/button-story-using-args.ts.mdx',
@@ -238,8 +236,6 @@ What’s more, you can import `args` to reuse when writing stories for other com
     'react/button-group-story.js.mdx',
     'react/button-group-story.ts.mdx',
     'angular/button-group-story.ts.mdx',
-    'vue/button-group-story.2.js.mdx',
-    'vue/button-group-story.2.ts.mdx',
     'vue/button-group-story.3.js.mdx',
     'vue/button-group-story.3.ts.mdx',
     'web-components/button-group-story.js.mdx',
@@ -425,8 +421,6 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
     'react/list-story-reuse-data.js.mdx',
     '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',
diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index be3891cdae06..4e6ac15a18ef 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -14,8 +14,6 @@ The simplest approach we can take is to reuse the stories of the `ListItem` in t
   paths={[
     'react/list-story-unchecked.js.mdx',
     'react/list-story-unchecked.ts.mdx',
-    'vue/list-story-unchecked.2.js.mdx',
-    'vue/list-story-unchecked.2.ts.mdx',
     'vue/list-story-unchecked.3.js.mdx',
     'vue/list-story-unchecked.3.ts.mdx',
     'angular/list-story-unchecked.ts.mdx',
@@ -78,8 +76,6 @@ Another option that is more “data”-based is to create a special “story-gen
   paths={[
     'react/list-story-template.js.mdx',
     'react/list-story-template.ts.mdx',
-    'vue/list-story-template.2.js.mdx',
-    'vue/list-story-template.2.ts.mdx',
     'vue/list-story-template.3.js.mdx',
     'vue/list-story-template.3.ts.mdx',
     'angular/list-story-template.ts.mdx',
diff --git a/docs/writing-stories/typescript.md b/docs/writing-stories/typescript.md
index da09837e9a74..616a501ec52b 100644
--- a/docs/writing-stories/typescript.md
+++ b/docs/writing-stories/typescript.md
@@ -68,7 +68,6 @@ Sometimes stories need to define args that aren’t included in the component's
 <CodeSnippets
   paths={[
     'react/page-story-slots.ts.mdx',
-    'vue/page-story-slots.2.ts.mdx',
     'vue/page-story-slots.3.ts.mdx',
     'angular/page-story-slots.ts.mdx',
     'web-components/page-story-slots.ts.mdx',
@@ -80,11 +79,11 @@ Sometimes stories need to define args that aren’t included in the component's
 
 <!-- prettier-ignore-end -->
 
-<IfRenderer renderer={['vue']}>
+<IfRenderer renderer='vue'>
 
 ### Vue specific tips
 
-Vue has excellent support for TypeScript, and we have done our utmost to take advantage of that in the stories files. For example, consider the following strongly typed Vue3 single file component (SFC):
+Vue has excellent support for TypeScript, and we have done our utmost to take advantage of that in the stories files. For example, consider the following strongly typed Vue 3 single file component (SFC):
 
 ```html
 <script setup lang="ts">
@@ -111,7 +110,7 @@ This setup will add type support for `*.vue` imports to your `*.stories.ts` file
 
 </IfRenderer>
 
-<IfRenderer renderer={['svelte']}>
+<IfRenderer renderer='svelte'>
 
 ### Svelte specific tips
 
diff --git a/docs/writing-tests/accessibility-testing.md b/docs/writing-tests/accessibility-testing.md
index 14506ae979e2..7151a43e8b73 100644
--- a/docs/writing-tests/accessibility-testing.md
+++ b/docs/writing-tests/accessibility-testing.md
@@ -65,8 +65,6 @@ Storybook's a11y addon runs [Axe](https://github.com/dequelabs/axe-core) on the
     'react/component-story-with-accessibility.js.mdx',
     'react/component-story-with-accessibility.ts.mdx',
     'angular/component-story-with-accessibility.ts.mdx',
-    'vue/component-story-with-accessibility.2.js.mdx',
-    'vue/component-story-with-accessibility.2.ts.mdx',
     'vue/component-story-with-accessibility.3.js.mdx',
     'vue/component-story-with-accessibility.3.ts.mdx',
     'svelte/component-story-with-accessibility.js.mdx',
diff --git a/docs/writing-tests/storyshots-migration-guide.md b/docs/writing-tests/storyshots-migration-guide.md
index ac512c4d4123..42f0545dc57b 100644
--- a/docs/writing-tests/storyshots-migration-guide.md
+++ b/docs/writing-tests/storyshots-migration-guide.md
@@ -103,7 +103,7 @@ If you need project-level annotations (e.g., [decorators](../writing-stories/dec
 
 <Callout variant="info" icon="ℹ️">
 
-If you're using Vue3, you must install the [`@storybook/testing-vue3`](https://storybook.js.org/addons/@storybook/testing-vue3) package to use the `setProjectAnnotations` API in your setup file and the `composeStories` API in your existing tests.
+If you're using Vue 3, you must install the [`@storybook/testing-vue3`](https://storybook.js.org/addons/@storybook/testing-vue3) package to use the `setProjectAnnotations` API in your setup file and the `composeStories` API in your existing tests.
 
 </Callout>
 
diff --git a/docs/writing-tests/test-coverage.md b/docs/writing-tests/test-coverage.md
index cf635c22a4f4..b0ce9139515f 100644
--- a/docs/writing-tests/test-coverage.md
+++ b/docs/writing-tests/test-coverage.md
@@ -138,7 +138,7 @@ Out of the box, code coverage tests work seamlessly with Storybook's test-runner
 
 ### Run test coverage in other frameworks
 
-If you intend on running coverage tests in frameworks with special files like Vue or Svelte, you'll need to adjust your configuration and enable the required file extensions. For example, if you're using Vue, you'll need to add the following to your nyc configuration file (i.e., `.nycrc.json` or `nyc.config.js`):
+If you intend on running coverage tests in frameworks with special files like Vue 3 or Svelte, you'll need to adjust your configuration and enable the required file extensions. For example, if you're using Vue, you'll need to add the following to your nyc configuration file (i.e., `.nycrc.json` or `nyc.config.js`):
 
 <!-- prettier-ignore-start -->
 

From 7a60a4ecc3e432340b9a90c951b87038b8d86085 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Mon, 22 Jan 2024 14:16:40 +0000
Subject: [PATCH 2/3] start addressing conflicts

---
 README.md                                     |  6 ++--
 code/addons/controls/README.md                | 34 +------------------
 code/addons/docs/docs/props-tables.md         |  2 +-
 .../button-story-with-blue-args.ts-4-9.mdx    | 23 -------------
 .../vue/button-story-with-blue-args.ts.mdx    | 23 -------------
 5 files changed, 4 insertions(+), 84 deletions(-)
 delete mode 100644 docs/snippets/vue/button-story-with-blue-args.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/button-story-with-blue-args.ts.mdx

diff --git a/README.md b/README.md
index 8067ec3d6446..c0ac86dcfdf1 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,6 @@ Storybook is a frontend workshop for building UI components and pages in isolati
   View README for:<br/>
   <a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/react/latest?style=for-the-badge&logo=storybook&logoColor=ffffff&color=66BF3C" /></a>
   <a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/react/next?style=for-the-badge&logo=storybook&logoColor=ffffff&color=1EA7FD" /></a>
-  <a href="https://github.com/storybookjs/storybook/blob/future/base/README.md" title="future"><img alt="future" src="https://img.shields.io/npm/v/@storybook/react/future?style=for-the-badge&logo=storybook&logoColor=ffffff&color=FF4785" /></a>
 </p>
 
 ## Table of contents
@@ -98,17 +97,16 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
 ### Supported Frameworks
 
 | Renderer                                                       | Demo                                                                                                                                                                         |                                                                                                                                                       |
-| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+|----------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
 | [React](code/renderers/react)                                  | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://next--630511d655df72125520f051.chromatic.com/)          | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react)                                          |
 | [Angular](code/frameworks/angular/)                            | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://next--6322ce6af69825592bbb28fc.chromatic.com/)        | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/)                                  |
-| [Vue 3](code/renderers/vue3)                                   | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/)            | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](code/renderers/vue)                                                |
+| [Vue 3](code/renderers/vue3)                                   | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue3/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/)            | [![Vue 3](https://img.shields.io/npm/dm/@storybook/vue3?style=flat-square&color=eee)](code/renderers/vue3/)                                                |
 | [Web components](code/renderers/web-components)                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://next--638db5bf49adfdfe8cf545e0.chromatic.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components)                       |
 | [React Native](https://github.com/storybookjs/react-native)    | [![](https://img.shields.io/npm/v/@storybook/react-native/latest?style=flat-square&color=blue&label)](/)                                                                     | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native)     |
 | [HTML](code/renderers/html)                                    | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://next--63dd39a158cf6fc05199b4bb.chromatic.com/)           | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html)                                             |
 | [Ember](code/frameworks/ember/)                                | [![](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](/)                                                                            | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](code/frameworks/ember/)                                        |
 | [Svelte](code/renderers/svelte)                                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://next--630873996e4e3557791c069c.chromatic.com/)         | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](code/renderers/svelte)                                       |
 | [Preact](code/renderers/preact)                                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://next--63b588a512565bfaace15e7c.chromatic.com/)         | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](code/renderers/preact)                                       |
-| [Marionette.js](https://github.com/storybookjs/marionette)     | [![](https://img.shields.io/npm/v/@storybook/marionette/latest?style=flat-square&color=blue&label)](/)                                                                       | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette)        |
 | [Qwik](https://github.com/literalpie/storybook-framework-qwik) | [![](https://img.shields.io/npm/v/storybook-framework-qwik/latest?style=flat-square&color=blue&label)](/)                                                                    | [![Qwik](https://img.shields.io/npm/dm/storybook-framework-qwik?style=flat-square&color=eee)](https://github.com/literalpie/storybook-framework-qwik) |
 | [SolidJS](https://github.com/storybookjs/solidjs)              | [![](https://img.shields.io/npm/v/storybook-solidjs/latest?style=flat-square&color=blue&label)](/)                                                                           | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs?style=flat-square&color=eee)](https://github.com/storybookjs/solidjs)                     |
 | [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](/)                                                                           | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native)                       |
diff --git a/code/addons/controls/README.md b/code/addons/controls/README.md
index 08c39343d1f4..3b04a3a75dec 100644
--- a/code/addons/controls/README.md
+++ b/code/addons/controls/README.md
@@ -176,36 +176,4 @@ Like [story parameters](https://storybook.js.org/docs/react/writing-stories/para
 
 ### How do controls work with MDX?
 
-MDX compiles to component story format (CSF) under the hood, so there's a direct mapping for every example above using the `args` and `argTypes` props.
-
-Consider this example in CSF:
-
-```js
-import { Button } from './Button';
-export default {
-  title: 'Button',
-  component: Button,
-  argTypes: {
-    background: { control: 'color' },
-  },
-};
-
-const Template = (args) => <Button {...args} />;
-export const Basic = Template.bind({});
-Basic.args = { label: 'hello', background: '#ff0' };
-```
-
-Here's the MDX equivalent:
-
-```jsx
-import { Meta, Story } from '@storybook/addon-docs';
-import { Button } from './Button';
-
-<Meta title="Button" component={Button} argTypes={{ background: { control: 'color' } }} />
-
-export const Template = (args) => <Button {...args} />
-
-<Story name="Basic" args={{ label: 'hello', background: '#ff0' }}>
-  {Template.bind({})}
-</Story>
-```
+When importing stories from your CSF file into MDX, controls will work the same way. See [the documentation](https://storybook.js.org/docs/writing-docs/mdx#basic-example) for examples.
\ No newline at end of file
diff --git a/code/addons/docs/docs/props-tables.md b/code/addons/docs/docs/props-tables.md
index 82c670f2a01d..322fd29c7240 100644
--- a/code/addons/docs/docs/props-tables.md
+++ b/code/addons/docs/docs/props-tables.md
@@ -255,7 +255,7 @@ This package relies on a variety of sub-packages to extract property information
 | Framework      | Underlying library                       | Docs                                             | Open issues                                                                                                                                                        |
 | -------------- | ---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | React          | `react-docgen` `react-docgen-typescript` | [Docs](../react/README.md#props-tables)          | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+react%22)          |
-| Vue 3          | `vue-docgen-api`                         | [Docs](../vue3/README.md#props-tables)           | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+vue%22)            |
+| Vue 3          | `vue-docgen-api`                         | [Docs](../vue3/README.md#props-tables)           | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22vue3%22)            |
 | Angular        | `compodoc`                               | [Docs](../angular/README.md#props-tables)        | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+angular%22)        |
 | Web-components | `custom-elements.json`                   | [Docs](../web-components/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+web-components%22) |
 | Ember          | `yui-doc`                                | [Docs](../ember/README.md#props-tables)          | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+ember%22)          |
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts-4-9.mdx b/docs/snippets/vue/button-story-with-blue-args.ts-4-9.mdx
deleted file mode 100644
index cadffedac73b..000000000000
--- a/docs/snippets/vue/button-story-with-blue-args.ts-4-9.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta } from '@storybook/vue3';
-
-import Button from './Button.vue';
-
-const meta = {
-  component: Button,
-  //👇 Creates specific parameters for the story
-  parameters: {
-    backgrounds: {
-      values: [
-        { name: 'red', value: '#f00' },
-        { name: 'green', value: '#0f0' },
-        { name: 'blue', value: '#00f' },
-      ],
-    },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-```
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts.mdx b/docs/snippets/vue/button-story-with-blue-args.ts.mdx
deleted file mode 100644
index 401d45af5667..000000000000
--- a/docs/snippets/vue/button-story-with-blue-args.ts.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta } from '@storybook/vue3';
-
-import Button from './Button.vue';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  //👇 Creates specific parameters for the story
-  parameters: {
-    backgrounds: {
-      values: [
-        { name: 'red', value: '#f00' },
-        { name: 'green', value: '#0f0' },
-        { name: 'blue', value: '#00f' },
-      ],
-    },
-  },
-};
-
-export default meta;
-```

From fb19ed0aff6a3e13babbead6d48b01064d4674c1 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Tue, 23 Jan 2024 11:22:04 +0000
Subject: [PATCH 3/3] Update code/builders/builder-vite/README.md

Co-authored-by: Michael Shilman <shilman@users.noreply.github.com>
---
 code/builders/builder-vite/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/builders/builder-vite/README.md b/code/builders/builder-vite/README.md
index 02fce9b00d35..02532578fcad 100644
--- a/code/builders/builder-vite/README.md
+++ b/code/builders/builder-vite/README.md
@@ -133,7 +133,7 @@ See [Customize Vite config](#customize-vite-config) for details about using `vit
 
 ### React Docgen
 
-Docgen is used in Storybook to populate the props table in docs view, the controls panel, and for several other addons. Docgen is supported in Svelte, Vue 3, and React, and there are two docgen options when using react, `react-docgen` and `react-docgen-typescript`. You can learn more about the pros/cons of each in [this gist](https://gist.github.com/shilman/036313ffa3af52ca986b375d90ea46b0). By default, if we find a `typescript` dependency in your `package.json` file, we will assume you're using typescript and will choose `react-docgen-typescript`. You can change this by setting the `typescript.reactDocgen` option in your `.storybook/main.js` file:
+Docgen is used in Storybook to populate the props table in docs view, the controls panel, and for several other addons. Docgen is supported in Svelte, Vue 3, and React. React docgen is configurable via the [`typescript.reactDocgen`](https://storybook.js.org/docs/api/main-config-typescript#reactdocgen) setting in `.storybook/main.js`.
 
 ```javascript
 export default {