From 48c2d7491181591971176416d1c9084bf012e244 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 4 Dec 2023 17:28:04 +0100
Subject: [PATCH 1/8] Remove deprecated packages from next

---
 code/frameworks/vue-vite/README.md            |  48 ----
 code/frameworks/vue-vite/jest.config.js       |   7 -
 code/frameworks/vue-vite/package.json         |  80 ------
 code/frameworks/vue-vite/preset.js            |   1 -
 code/frameworks/vue-vite/project.json         |   6 -
 code/frameworks/vue-vite/src/index.ts         |   1 -
 .../vue-vite/src/plugins/vue-docgen.ts        |  27 --
 code/frameworks/vue-vite/src/preset.ts        |  32 ---
 code/frameworks/vue-vite/src/types.ts         |  36 ---
 code/frameworks/vue-vite/tsconfig.json        |   9 -
 code/frameworks/vue-webpack5/README.md        |  48 ----
 code/frameworks/vue-webpack5/jest.config.js   |   7 -
 code/frameworks/vue-webpack5/package.json     |  84 -------
 code/frameworks/vue-webpack5/preset.js        |   1 -
 code/frameworks/vue-webpack5/project.json     |   6 -
 code/frameworks/vue-webpack5/src/index.ts     |   1 -
 code/frameworks/vue-webpack5/src/preset.ts    |  26 --
 code/frameworks/vue-webpack5/src/types.ts     |  45 ----
 code/frameworks/vue-webpack5/src/typings.d.ts |   1 -
 code/frameworks/vue-webpack5/tsconfig.json    |   9 -
 code/renderers/vue/README.md                  |   1 -
 code/renderers/vue/jest.config.js             |   7 -
 code/renderers/vue/package.json               |  91 -------
 code/renderers/vue/preset.js                  |   1 -
 code/renderers/vue/project.json               |   6 -
 code/renderers/vue/src/__tests__/Button.vue   |  28 ---
 code/renderers/vue/src/decorateStory.ts       |  91 -------
 .../renderers/vue/src/docs/extractArgTypes.ts |  91 -------
 .../vue/src/docs/sourceDecorator.test.ts      | 197 ---------------
 .../renderers/vue/src/docs/sourceDecorator.ts | 233 ------------------
 code/renderers/vue/src/entry-preview-docs.ts  |  17 --
 code/renderers/vue/src/entry-preview.ts       |   3 -
 code/renderers/vue/src/globals.ts             |   5 -
 code/renderers/vue/src/index.ts               |   8 -
 code/renderers/vue/src/preset.ts              |  15 --
 code/renderers/vue/src/public-types.test.ts   | 175 -------------
 code/renderers/vue/src/public-types.ts        |  89 -------
 code/renderers/vue/src/render.ts              | 157 ------------
 code/renderers/vue/src/types.ts               |  24 --
 code/renderers/vue/src/typings.d.ts           |   2 -
 code/renderers/vue/src/util.ts                |  24 --
 .../vue/template/cli/Button.stories.js        |  48 ----
 code/renderers/vue/template/cli/Button.vue    |  54 ----
 .../vue/template/cli/Header.stories.js        |  30 ---
 code/renderers/vue/template/cli/Header.vue    |  63 -----
 .../vue/template/cli/Page.stories.js          |  30 ---
 code/renderers/vue/template/cli/Page.vue      |  88 -------
 .../vue/template/components/Button.vue        |  54 ----
 .../vue/template/components/Form.vue          |  47 ----
 .../vue/template/components/Html.vue          |  16 --
 .../renderers/vue/template/components/Pre.vue |  29 ---
 .../vue/template/components/button.css        |  30 ---
 .../vue/template/components/index.js          |  13 -
 .../template/stories/core-template.stories.js |   6 -
 .../stories/custom-decorators.stories.js      |  43 ----
 .../stories/custom-rendering.stories.js       |  62 -----
 .../vue/template/stories/vue-mdx.stories.mdx  |  44 ----
 code/renderers/vue/tsconfig.json              |  13 -
 58 files changed, 2410 deletions(-)
 delete mode 100644 code/frameworks/vue-vite/README.md
 delete mode 100644 code/frameworks/vue-vite/jest.config.js
 delete mode 100644 code/frameworks/vue-vite/package.json
 delete mode 100644 code/frameworks/vue-vite/preset.js
 delete mode 100644 code/frameworks/vue-vite/project.json
 delete mode 100644 code/frameworks/vue-vite/src/index.ts
 delete mode 100644 code/frameworks/vue-vite/src/plugins/vue-docgen.ts
 delete mode 100644 code/frameworks/vue-vite/src/preset.ts
 delete mode 100644 code/frameworks/vue-vite/src/types.ts
 delete mode 100644 code/frameworks/vue-vite/tsconfig.json
 delete mode 100644 code/frameworks/vue-webpack5/README.md
 delete mode 100644 code/frameworks/vue-webpack5/jest.config.js
 delete mode 100644 code/frameworks/vue-webpack5/package.json
 delete mode 100644 code/frameworks/vue-webpack5/preset.js
 delete mode 100644 code/frameworks/vue-webpack5/project.json
 delete mode 100644 code/frameworks/vue-webpack5/src/index.ts
 delete mode 100644 code/frameworks/vue-webpack5/src/preset.ts
 delete mode 100644 code/frameworks/vue-webpack5/src/types.ts
 delete mode 100644 code/frameworks/vue-webpack5/src/typings.d.ts
 delete mode 100644 code/frameworks/vue-webpack5/tsconfig.json
 delete mode 100644 code/renderers/vue/README.md
 delete mode 100644 code/renderers/vue/jest.config.js
 delete mode 100644 code/renderers/vue/package.json
 delete mode 100644 code/renderers/vue/preset.js
 delete mode 100644 code/renderers/vue/project.json
 delete mode 100644 code/renderers/vue/src/__tests__/Button.vue
 delete mode 100644 code/renderers/vue/src/decorateStory.ts
 delete mode 100644 code/renderers/vue/src/docs/extractArgTypes.ts
 delete mode 100644 code/renderers/vue/src/docs/sourceDecorator.test.ts
 delete mode 100644 code/renderers/vue/src/docs/sourceDecorator.ts
 delete mode 100644 code/renderers/vue/src/entry-preview-docs.ts
 delete mode 100644 code/renderers/vue/src/entry-preview.ts
 delete mode 100644 code/renderers/vue/src/globals.ts
 delete mode 100644 code/renderers/vue/src/index.ts
 delete mode 100644 code/renderers/vue/src/preset.ts
 delete mode 100644 code/renderers/vue/src/public-types.test.ts
 delete mode 100644 code/renderers/vue/src/public-types.ts
 delete mode 100644 code/renderers/vue/src/render.ts
 delete mode 100644 code/renderers/vue/src/types.ts
 delete mode 100644 code/renderers/vue/src/typings.d.ts
 delete mode 100644 code/renderers/vue/src/util.ts
 delete mode 100644 code/renderers/vue/template/cli/Button.stories.js
 delete mode 100644 code/renderers/vue/template/cli/Button.vue
 delete mode 100644 code/renderers/vue/template/cli/Header.stories.js
 delete mode 100644 code/renderers/vue/template/cli/Header.vue
 delete mode 100644 code/renderers/vue/template/cli/Page.stories.js
 delete mode 100644 code/renderers/vue/template/cli/Page.vue
 delete mode 100644 code/renderers/vue/template/components/Button.vue
 delete mode 100644 code/renderers/vue/template/components/Form.vue
 delete mode 100644 code/renderers/vue/template/components/Html.vue
 delete mode 100644 code/renderers/vue/template/components/Pre.vue
 delete mode 100644 code/renderers/vue/template/components/button.css
 delete mode 100644 code/renderers/vue/template/components/index.js
 delete mode 100644 code/renderers/vue/template/stories/core-template.stories.js
 delete mode 100644 code/renderers/vue/template/stories/custom-decorators.stories.js
 delete mode 100644 code/renderers/vue/template/stories/custom-rendering.stories.js
 delete mode 100644 code/renderers/vue/template/stories/vue-mdx.stories.mdx
 delete mode 100644 code/renderers/vue/tsconfig.json

diff --git a/code/frameworks/vue-vite/README.md b/code/frameworks/vue-vite/README.md
deleted file mode 100644
index f19ebc711b42..000000000000
--- a/code/frameworks/vue-vite/README.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# Storybook for Vue 2 and Vite
-
-Storybook for Vue 2 is a UI development environment for your Vue 2 components.
-With it, you can visualize different states of your UI components and develop them interactively.
-
-![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
-
-Storybook runs outside of your app.
-So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
-
-## Getting Started
-
-```sh
-cd my-vue-app
-npx storybook@latest init
-```
-
-For more information visit: [storybook.js.org](https://storybook.js.org)
-
-## Starter Storybook-for-Vue Boilerplate project with [Vuetify](https://github.com/vuetifyjs/vuetify) Material Component Framework
-
-<https://github.com/white-rabbit-japan/vue-vuetify-storybook>
-
----
-
-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.
-
-## Vue Notes
-
-- When using global custom components or extensions (e.g., `Vue.use`). You will need to declare those in the `./storybook/preview.js`.
-
-## Known Limitations
-
-In Storybook story and decorator components, you can not access the Vue instance
-in factory functions for default prop values:
-
-```js
-{
-  props: {
-    foo: {
-      default() {
-        return this.bar; // does not work!
-      }
-    }
-  }
-}
-```
diff --git a/code/frameworks/vue-vite/jest.config.js b/code/frameworks/vue-vite/jest.config.js
deleted file mode 100644
index 343e4c7a7f32..000000000000
--- a/code/frameworks/vue-vite/jest.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const path = require('path');
-const baseConfig = require('../../jest.config.node');
-
-module.exports = {
-  ...baseConfig,
-  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
-};
diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json
deleted file mode 100644
index 6dbba9abdb01..000000000000
--- a/code/frameworks/vue-vite/package.json
+++ /dev/null
@@ -1,80 +0,0 @@
-{
-  "name": "@storybook/vue-vite",
-  "version": "8.0.0-alpha.0",
-  "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
-  "keywords": [
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/vue-vite",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "code/frameworks/vue-vite"
-  },
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/storybook"
-  },
-  "license": "MIT",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
-    },
-    "./preset": {
-      "types": "./dist/preset.d.ts",
-      "require": "./dist/preset.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts",
-    "!src/**/*"
-  ],
-  "scripts": {
-    "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
-  },
-  "dependencies": {
-    "@storybook/builder-vite": "workspace:*",
-    "@storybook/core-common": "workspace:*",
-    "@storybook/core-server": "workspace:*",
-    "@storybook/vue": "workspace:*",
-    "magic-string": "^0.30.0",
-    "vue-docgen-api": "^4.40.0"
-  },
-  "devDependencies": {
-    "typescript": "^5.3.2",
-    "vite": "^4.0.0",
-    "vue": "^2.7.10"
-  },
-  "peerDependencies": {
-    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0",
-    "vue": "^2.7.0"
-  },
-  "engines": {
-    "node": ">=16.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "bundler": {
-    "entries": [
-      "./src/index.ts",
-      "./src/preset.ts"
-    ],
-    "platform": "node"
-  },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
-}
diff --git a/code/frameworks/vue-vite/preset.js b/code/frameworks/vue-vite/preset.js
deleted file mode 100644
index a83f95279e7f..000000000000
--- a/code/frameworks/vue-vite/preset.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/preset');
diff --git a/code/frameworks/vue-vite/project.json b/code/frameworks/vue-vite/project.json
deleted file mode 100644
index 605d4a032ab9..000000000000
--- a/code/frameworks/vue-vite/project.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "@storybook/vue-vite",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "implicitDependencies": [],
-  "type": "library"
-}
diff --git a/code/frameworks/vue-vite/src/index.ts b/code/frameworks/vue-vite/src/index.ts
deleted file mode 100644
index fcb073fefcd6..000000000000
--- a/code/frameworks/vue-vite/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './types';
diff --git a/code/frameworks/vue-vite/src/plugins/vue-docgen.ts b/code/frameworks/vue-vite/src/plugins/vue-docgen.ts
deleted file mode 100644
index e80ca52d60c2..000000000000
--- a/code/frameworks/vue-vite/src/plugins/vue-docgen.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { parse } from 'vue-docgen-api';
-import type { PluginOption } from 'vite';
-import { createFilter } from 'vite';
-import MagicString from 'magic-string';
-
-export function vueDocgen(): PluginOption {
-  const include = /\.(vue)$/;
-  const filter = createFilter(include);
-
-  return {
-    name: 'storybook:vue2-docgen-plugin',
-
-    async transform(src: string, id: string) {
-      if (!filter(id)) return undefined;
-
-      const metaData = await parse(id);
-      const metaSource = JSON.stringify(metaData);
-      const s = new MagicString(src);
-      s.append(`;__component__.exports.__docgenInfo = ${metaSource}`);
-
-      return {
-        code: s.toString(),
-        map: s.generateMap({ hires: true, source: id }),
-      };
-    },
-  };
-}
diff --git a/code/frameworks/vue-vite/src/preset.ts b/code/frameworks/vue-vite/src/preset.ts
deleted file mode 100644
index aec3778a7525..000000000000
--- a/code/frameworks/vue-vite/src/preset.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { dirname, join } from 'path';
-import type { PresetProperty } from '@storybook/types';
-import { mergeConfig } from 'vite';
-import type { StorybookConfig } from './types';
-import { vueDocgen } from './plugins/vue-docgen';
-
-const getAbsolutePath = <I extends string>(input: I): I =>
-  dirname(require.resolve(join(input, 'package.json'))) as any;
-
-export const core: PresetProperty<'core'> = async (config, options) => {
-  const framework = await options.presets.apply('framework');
-
-  return {
-    ...config,
-    builder: {
-      name: getAbsolutePath('@storybook/builder-vite'),
-      options: typeof framework === 'string' ? {} : framework?.options.builder || {},
-    },
-    renderer: getAbsolutePath('@storybook/vue'),
-  };
-};
-
-export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
-  return mergeConfig(config, {
-    plugins: [vueDocgen()],
-    resolve: {
-      alias: {
-        vue: 'vue/dist/vue.esm.js',
-      },
-    },
-  });
-};
diff --git a/code/frameworks/vue-vite/src/types.ts b/code/frameworks/vue-vite/src/types.ts
deleted file mode 100644
index e5ba544f554c..000000000000
--- a/code/frameworks/vue-vite/src/types.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
-import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
-
-type FrameworkName = '@storybook/vue-vite';
-type BuilderName = '@storybook/builder-vite';
-
-export type FrameworkOptions = {
-  builder?: BuilderOptions;
-};
-
-type StorybookConfigFramework = {
-  framework:
-    | FrameworkName
-    | {
-        name: FrameworkName;
-        options: FrameworkOptions;
-      };
-  core?: StorybookConfigBase['core'] & {
-    builder?:
-      | BuilderName
-      | {
-          name: BuilderName;
-          options: BuilderOptions;
-        };
-  };
-};
-
-/**
- * The interface for Storybook configuration in `main.ts` files.
- */
-export type StorybookConfig = Omit<
-  StorybookConfigBase,
-  keyof StorybookConfigVite | keyof StorybookConfigFramework
-> &
-  StorybookConfigVite &
-  StorybookConfigFramework;
diff --git a/code/frameworks/vue-vite/tsconfig.json b/code/frameworks/vue-vite/tsconfig.json
deleted file mode 100644
index 1405a8fbb5a6..000000000000
--- a/code/frameworks/vue-vite/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "strict": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true
-  },
-  "include": ["src/**/*"]
-}
diff --git a/code/frameworks/vue-webpack5/README.md b/code/frameworks/vue-webpack5/README.md
deleted file mode 100644
index 9af5a6d0512f..000000000000
--- a/code/frameworks/vue-webpack5/README.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# Storybook for Vue 3 and Webpack
-
-Storybook for Vue 3 is a UI development environment for your Vue 3 components.
-With it, you can visualize different states of your UI components and develop them interactively.
-
-![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
-
-Storybook runs outside of your app.
-So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
-
-## Getting Started
-
-```sh
-cd my-vue-app
-npx storybook@latest init
-```
-
-For more information visit: [storybook.js.org](https://storybook.js.org)
-
-## Starter Storybook-for-Vue Boilerplate project with [Vuetify](https://github.com/vuetifyjs/vuetify) Material Component Framework
-
-<https://github.com/white-rabbit-japan/vue-vuetify-storybook>
-
----
-
-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.
-
-## Vue Notes
-
-- When using global custom components or extensions (e.g., `Vue.use`). You will need to declare those in the `./storybook/preview.js`.
-
-## Known Limitations
-
-In Storybook story and decorator components, you can not access the Vue instance
-in factory functions for default prop values:
-
-```js
-{
-  props: {
-    foo: {
-      default() {
-        return this.bar; // does not work!
-      }
-    }
-  }
-}
-```
diff --git a/code/frameworks/vue-webpack5/jest.config.js b/code/frameworks/vue-webpack5/jest.config.js
deleted file mode 100644
index 343e4c7a7f32..000000000000
--- a/code/frameworks/vue-webpack5/jest.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const path = require('path');
-const baseConfig = require('../../jest.config.node');
-
-module.exports = {
-  ...baseConfig,
-  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
-};
diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json
deleted file mode 100644
index adef5761e2e4..000000000000
--- a/code/frameworks/vue-webpack5/package.json
+++ /dev/null
@@ -1,84 +0,0 @@
-{
-  "name": "@storybook/vue-webpack5",
-  "version": "8.0.0-alpha.0",
-  "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
-  "keywords": [
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/vue-webpack5",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "code/frameworks/vue-webpack5"
-  },
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/storybook"
-  },
-  "license": "MIT",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
-    },
-    "./preset": {
-      "types": "./dist/preset.d.ts",
-      "require": "./dist/preset.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts",
-    "!src/**/*"
-  ],
-  "scripts": {
-    "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
-  },
-  "dependencies": {
-    "@storybook/builder-webpack5": "workspace:*",
-    "@storybook/core-common": "workspace:*",
-    "@storybook/preset-vue-webpack": "workspace:*",
-    "@storybook/vue": "workspace:*",
-    "@types/node": "^18.0.0"
-  },
-  "devDependencies": {
-    "typescript": "^5.3.2",
-    "vue": "^2.6.12",
-    "vue-loader": "^15.7.0",
-    "vue-template-compiler": "^2.6.14"
-  },
-  "peerDependencies": {
-    "@babel/core": "*",
-    "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0",
-    "css-loader": "*",
-    "vue": "^2.6.8",
-    "vue-loader": "^15.7.0",
-    "vue-template-compiler": "^2.6.8"
-  },
-  "engines": {
-    "node": ">=16.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "bundler": {
-    "entries": [
-      "./src/index.ts",
-      "./src/preset.ts"
-    ],
-    "platform": "node"
-  },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
-}
diff --git a/code/frameworks/vue-webpack5/preset.js b/code/frameworks/vue-webpack5/preset.js
deleted file mode 100644
index a83f95279e7f..000000000000
--- a/code/frameworks/vue-webpack5/preset.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/preset');
diff --git a/code/frameworks/vue-webpack5/project.json b/code/frameworks/vue-webpack5/project.json
deleted file mode 100644
index 02735b354e6f..000000000000
--- a/code/frameworks/vue-webpack5/project.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "@storybook/vue-webpack5",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "implicitDependencies": [],
-  "type": "library"
-}
diff --git a/code/frameworks/vue-webpack5/src/index.ts b/code/frameworks/vue-webpack5/src/index.ts
deleted file mode 100644
index fcb073fefcd6..000000000000
--- a/code/frameworks/vue-webpack5/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './types';
diff --git a/code/frameworks/vue-webpack5/src/preset.ts b/code/frameworks/vue-webpack5/src/preset.ts
deleted file mode 100644
index 690adc16b7c8..000000000000
--- a/code/frameworks/vue-webpack5/src/preset.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { dirname, join } from 'path';
-import type { PresetProperty } from '@storybook/types';
-
-const getAbsolutePath = <I extends string>(input: I): I =>
-  dirname(require.resolve(join(input, 'package.json'))) as any;
-
-export const addons: PresetProperty<'addons'> = [getAbsolutePath('@storybook/preset-vue-webpack')];
-
-export const core: PresetProperty<'core'> = async (config, options) => {
-  const framework = await options.presets.apply('framework');
-
-  return {
-    ...config,
-    builder: {
-      name: getAbsolutePath('@storybook/builder-webpack5'),
-      options: typeof framework === 'string' ? {} : framework.options.builder || {},
-    },
-    renderer: getAbsolutePath('@storybook/vue'),
-  };
-};
-
-export const typescript: PresetProperty<'typescript'> = async (config) => ({
-  ...config,
-  skipBabel: true,
-  skipCompiler: true,
-});
diff --git a/code/frameworks/vue-webpack5/src/types.ts b/code/frameworks/vue-webpack5/src/types.ts
deleted file mode 100644
index 7a1c993d8791..000000000000
--- a/code/frameworks/vue-webpack5/src/types.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import type {
-  StorybookConfig as StorybookConfigBase,
-  TypescriptOptions as TypescriptOptionsReact,
-} from '@storybook/preset-vue-webpack';
-import type {
-  StorybookConfigWebpack,
-  BuilderOptions,
-  TypescriptOptions as TypescriptOptionsBuilder,
-} from '@storybook/builder-webpack5';
-
-type FrameworkName = '@storybook/vue-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
-
-export type FrameworkOptions = {
-  builder?: BuilderOptions;
-};
-
-type StorybookConfigFramework = {
-  framework:
-    | FrameworkName
-    | {
-        name: FrameworkName;
-        options: FrameworkOptions;
-      };
-  core?: StorybookConfigBase['core'] & {
-    builder?:
-      | BuilderName
-      | {
-          name: BuilderName;
-          options: BuilderOptions;
-        };
-  };
-  typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> &
-    StorybookConfigBase['typescript'];
-};
-
-/**
- * The interface for Storybook configuration in `main.ts` files.
- */
-export type StorybookConfig = Omit<
-  StorybookConfigBase,
-  keyof StorybookConfigWebpack | keyof StorybookConfigFramework
-> &
-  StorybookConfigWebpack &
-  StorybookConfigFramework;
diff --git a/code/frameworks/vue-webpack5/src/typings.d.ts b/code/frameworks/vue-webpack5/src/typings.d.ts
deleted file mode 100644
index 45d6411e8736..000000000000
--- a/code/frameworks/vue-webpack5/src/typings.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'vue-loader/lib/plugin';
diff --git a/code/frameworks/vue-webpack5/tsconfig.json b/code/frameworks/vue-webpack5/tsconfig.json
deleted file mode 100644
index 1405a8fbb5a6..000000000000
--- a/code/frameworks/vue-webpack5/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "strict": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true
-  },
-  "include": ["src/**/*"]
-}
diff --git a/code/renderers/vue/README.md b/code/renderers/vue/README.md
deleted file mode 100644
index af07be8486f4..000000000000
--- a/code/renderers/vue/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# Storybook Vue renderer
diff --git a/code/renderers/vue/jest.config.js b/code/renderers/vue/jest.config.js
deleted file mode 100644
index 4396fbc7010d..000000000000
--- a/code/renderers/vue/jest.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const path = require('path');
-const baseConfig = require('../../jest.config.browser');
-
-module.exports = {
-  ...baseConfig,
-  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
-};
diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json
deleted file mode 100644
index 62a62528e323..000000000000
--- a/code/renderers/vue/package.json
+++ /dev/null
@@ -1,91 +0,0 @@
-{
-  "name": "@storybook/vue",
-  "version": "8.0.0-alpha.0",
-  "description": "Storybook Vue renderer",
-  "keywords": [
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/renderers/vue",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "code/renderers/vue"
-  },
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/storybook"
-  },
-  "license": "MIT",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
-    },
-    "./preset": "./preset.js",
-    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
-    "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
-    "./package.json": "./package.json"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist/**/*",
-    "template/cli/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts",
-    "!src/**/*"
-  ],
-  "scripts": {
-    "check": "vue-tsc --noEmit",
-    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
-  },
-  "dependencies": {
-    "@storybook/client-logger": "workspace:*",
-    "@storybook/docs-tools": "workspace:*",
-    "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "workspace:*",
-    "@storybook/types": "workspace:*",
-    "tiny-invariant": "^1.3.1",
-    "ts-dedent": "^2.0.0",
-    "type-fest": "~2.19"
-  },
-  "devDependencies": {
-    "typescript": "^5.3.2",
-    "vue": "2.6.14",
-    "vue-tsc": "latest"
-  },
-  "peerDependencies": {
-    "@babel/core": "*",
-    "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0",
-    "css-loader": "*",
-    "vue": "^2.6.8"
-  },
-  "peerDependenciesMeta": {
-    "babel-loader": {
-      "optional": true
-    }
-  },
-  "engines": {
-    "node": ">=16.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "bundler": {
-    "entries": [
-      "./src/index.ts",
-      "./src/preset.ts",
-      "./src/entry-preview.ts",
-      "./src/entry-preview-docs.ts"
-    ],
-    "platform": "browser"
-  },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
-}
diff --git a/code/renderers/vue/preset.js b/code/renderers/vue/preset.js
deleted file mode 100644
index a83f95279e7f..000000000000
--- a/code/renderers/vue/preset.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/preset');
diff --git a/code/renderers/vue/project.json b/code/renderers/vue/project.json
deleted file mode 100644
index 428631410866..000000000000
--- a/code/renderers/vue/project.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "@storybook/vue",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "implicitDependencies": [],
-  "type": "library"
-}
diff --git a/code/renderers/vue/src/__tests__/Button.vue b/code/renderers/vue/src/__tests__/Button.vue
deleted file mode 100644
index af26efec2577..000000000000
--- a/code/renderers/vue/src/__tests__/Button.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <button type="button" class="classes" @click="onClick" :disabled="disabled">{{ label }}</button>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import './button.css';
-
-export default Vue.extend({
-  name: 'my-button',
-
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    onClick(): void {
-      this.$emit('onClick');
-    },
-  },
-});
-</script>
diff --git a/code/renderers/vue/src/decorateStory.ts b/code/renderers/vue/src/decorateStory.ts
deleted file mode 100644
index eb69dfd63d7e..000000000000
--- a/code/renderers/vue/src/decorateStory.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import type { VueConstructor, ComponentOptions } from 'vue';
-import Vue from 'vue';
-import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/types';
-import { sanitizeStoryContextUpdate } from '@storybook/preview-api';
-
-import type { StoryFnVueReturnType, VueRenderer } from './types';
-import { extractProps } from './util';
-import { VALUES } from './render';
-
-export const WRAPS = 'STORYBOOK_WRAPS';
-
-function prepare(
-  rawStory: StoryFnVueReturnType,
-  innerStory?: StoryFnVueReturnType,
-  context?: StoryContext<VueRenderer>
-): VueConstructor | null {
-  let story: ComponentOptions<Vue> | VueConstructor;
-
-  if (typeof rawStory === 'string') {
-    story = { template: rawStory };
-  } else if (rawStory != null) {
-    story = rawStory as ComponentOptions<Vue>;
-  } else {
-    return null;
-  }
-
-  // @ts-expect-error (Converted from ts-ignore)
-  // eslint-disable-next-line no-underscore-dangle
-  if (!story._isVue) {
-    if (innerStory) {
-      story.components = { ...(story.components || {}), story: innerStory };
-    }
-    story = Vue.extend(story);
-    // @ts-expect-error // https://github.com/storybookjs/storybook/pull/7578#discussion_r307984824
-  } else if (story.options[WRAPS]) {
-    return story as VueConstructor;
-  }
-
-  return Vue.extend({
-    // @ts-expect-error // https://github.com/storybookjs/storybook/pull/7578#discussion_r307985279
-    [WRAPS]: story,
-    [VALUES]: {
-      // @ts-expect-error // https://github.com/storybookjs/storybook/pull/7578#discussion_r307984824
-      ...(innerStory ? innerStory.options[VALUES] : {}),
-      // @ts-expect-error // https://github.com/storybookjs/storybook/pull/7578#discussion_r307984824
-      ...extractProps(story),
-      ...(context?.args || {}),
-    },
-    functional: true,
-    render(h, { data, parent, children }) {
-      return h(
-        story,
-        {
-          ...data,
-          // @ts-expect-error // https://github.com/storybookjs/storybook/pull/7578#discussion_r307986196
-          props: { ...(data.props || {}), ...parent.$root[VALUES] },
-        },
-        children
-      );
-    },
-  });
-}
-
-export function decorateStory(
-  storyFn: LegacyStoryFn<VueRenderer>,
-  decorators: DecoratorFunction<VueRenderer>[]
-) {
-  return decorators.reduce(
-    (decorated: LegacyStoryFn<VueRenderer>, decorator) => (context: StoryContext<VueRenderer>) => {
-      let story: VueRenderer['storyResult'] | undefined;
-
-      const decoratedStory = decorator((update) => {
-        story = decorated({ ...context, ...sanitizeStoryContextUpdate(update) });
-        return story;
-      }, context);
-
-      if (!story) {
-        story = decorated(context);
-      }
-
-      if (decoratedStory === story) {
-        return story;
-      }
-
-      return prepare(decoratedStory, story) as VueRenderer['storyResult'];
-    },
-    (context) => {
-      return prepare(storyFn(context), undefined, context) as VueRenderer['storyResult'];
-    }
-  );
-}
diff --git a/code/renderers/vue/src/docs/extractArgTypes.ts b/code/renderers/vue/src/docs/extractArgTypes.ts
deleted file mode 100644
index c73a2471aa08..000000000000
--- a/code/renderers/vue/src/docs/extractArgTypes.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import type { StrictArgTypes } from '@storybook/types';
-import type { ArgTypesExtractor, DocgenInfo, PropDef } from '@storybook/docs-tools';
-import { hasDocgen, extractComponentProps, convert } from '@storybook/docs-tools';
-import invariant from 'tiny-invariant';
-
-const SECTIONS = ['props', 'events', 'slots', 'methods'];
-
-/**
- * As @enum tag is not implemented in vuedocgen, infers propdef enum type
- * from the presence of @values tag.
- */
-function inferEnum(propDef: PropDef, docgenInfo: DocgenInfo): false | PropDef {
-  // cast as any, since "values" doesn't exist in DocgenInfo type
-  const { type, values } = docgenInfo as any;
-  const matched = Array.isArray(values) && values.length && type && type.name !== 'enum';
-
-  if (!matched) {
-    return false;
-  }
-
-  invariant(propDef.type, 'PropDef should have a type defined');
-
-  const enumString = values.join(', ');
-  let { summary } = propDef.type;
-  summary = summary ? `${summary}: ${enumString}` : enumString;
-
-  Object.assign(propDef.type, {
-    ...propDef.type,
-    name: 'enum',
-    value: values,
-    summary,
-  });
-  return propDef;
-}
-
-/**
- * @returns {Array} result
- * @returns {PropDef} result.def - propDef
- * @returns {boolean} result.isChanged - flag whether propDef is mutated or not.
- *  this is needed to prevent sbType from performing convert(docgenInfo).
- */
-function verifyPropDef(propDef: PropDef, docgenInfo: DocgenInfo): [PropDef, boolean] {
-  let def = propDef;
-  let isChanged = false;
-
-  // another callback can be added here.
-  // callback is mutually exclusive from each other.
-  const callbacks = [inferEnum];
-  for (let i = 0, len = callbacks.length; i < len; i += 1) {
-    const matched = callbacks[i](propDef, docgenInfo);
-    if (matched) {
-      def = matched;
-      isChanged = true;
-    }
-  }
-
-  return [def, isChanged];
-}
-
-export const extractArgTypes: ArgTypesExtractor = (component) => {
-  if (!hasDocgen(component)) {
-    return null;
-  }
-  const results: StrictArgTypes = {};
-  SECTIONS.forEach((section) => {
-    const props = extractComponentProps(component, section);
-    props.forEach(({ propDef, docgenInfo, jsDocTags }) => {
-      const [result, isPropDefChanged] = verifyPropDef(propDef, docgenInfo);
-      const { name, type, description, defaultValue: defaultSummary, required } = result;
-
-      let sbType;
-      if (isPropDefChanged) {
-        sbType = type;
-      } else {
-        sbType = section === 'props' ? convert(docgenInfo) : { name: 'void' };
-      }
-      results[name] = {
-        name,
-        description,
-        type: { required, ...sbType },
-        table: {
-          type,
-          jsDocTags,
-          defaultValue: defaultSummary,
-          category: section,
-        },
-      };
-    });
-  });
-  return results;
-};
diff --git a/code/renderers/vue/src/docs/sourceDecorator.test.ts b/code/renderers/vue/src/docs/sourceDecorator.test.ts
deleted file mode 100644
index 136de32eb01c..000000000000
--- a/code/renderers/vue/src/docs/sourceDecorator.test.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-/* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
-
-import type { ComponentOptions, VueConstructor } from 'vue';
-import Vue from 'vue/dist/vue';
-import { vnodeToString } from './sourceDecorator';
-
-expect.addSnapshotSerializer({
-  print: (val: any) => val,
-  test: (val) => typeof val === 'string',
-});
-
-const getVNode = (Component: ComponentOptions<any, any, any>) => {
-  const vm = new (Vue as unknown as VueConstructor)({
-    render(h) {
-      return h(Component);
-    },
-  }).$mount();
-
-  // @ts-expect-error TS says it is called $vnode
-  return vm.$children[0]._vnode;
-};
-
-describe('vnodeToString', () => {
-  it('basic', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `<button>Button</button>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<button >Button</button>`);
-  });
-
-  it('static class', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `<button class="foo bar">Button</button>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<button class="foo bar">Button</button>`);
-  });
-
-  it('string dynamic class', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `<button :class="'foo'">Button</button>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<button class="foo">Button</button>`);
-  });
-
-  it('non-string dynamic class', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `<button :class="1">Button</button>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<button >Button</button>`);
-  });
-
-  it('array dynamic class', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `<button :class="['foo', null, false, 0, {bar: true, baz: false}]">Button</button>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<button class="foo bar">Button</button>`);
-  });
-
-  it('object dynamic class', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `<button :class="{foo: true, bar: false}">Button</button>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<button class="foo">Button</button>`);
-  });
-
-  it('merge dynamic and static classes', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `<button class="foo" :class="{bar: null, baz: 1}">Button</button>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<button class="foo baz">Button</button>`);
-  });
-
-  it('attributes', () => {
-    const MyComponent: ComponentOptions<any, any, any> = {
-      props: ['propA', 'propB', 'propC', 'propD', 'propE', 'propF', 'propG'],
-      template: '<div/>',
-    };
-
-    expect(
-      vnodeToString(
-        getVNode({
-          components: { MyComponent },
-          data(): { props: Record<string, any> } {
-            return {
-              props: {
-                propA: 'propA',
-                propB: 1,
-                propC: null,
-                propD: {
-                  foo: 'bar',
-                },
-                propE: true,
-                propF() {
-                  const foo = 'bar';
-
-                  return foo;
-                },
-                propG: undefined,
-              },
-            };
-          },
-          template: `<my-component v-bind="props"/>`,
-        })
-      )
-    ).toMatchInlineSnapshot(
-      `<my-component propE :propD='{"foo":"bar"}' :propC="null" :propB="1" propA="propA"/>`
-    );
-  });
-
-  it('children', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `
-          <div>
-            <form>
-              <button>Button</button>
-            </form>
-          </div>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<div ><form ><button >Button</button></form></div>`);
-  });
-
-  it('empty tag', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `
-          <div>
-          </div>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<div />`);
-  });
-
-  it('tag in text', () => {
-    expect(
-      vnodeToString(
-        getVNode({
-          template: `
-          <div>
-          <>
-          </div>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`
-      <div >{{\`
-                <>
-                \`}}</div>
-    `);
-  });
-
-  it('component element with children', () => {
-    const MyComponent: ComponentOptions<any, any, any> = {
-      props: ['propA'],
-      template: '<div><slot /></div>',
-    };
-
-    expect(
-      vnodeToString(
-        getVNode({
-          components: { MyComponent },
-          data(): { props: Record<string, any> } {
-            return {
-              props: {
-                propA: 'propA',
-              },
-            };
-          },
-          template: `<my-component v-bind="props"><div /></my-component>`,
-        })
-      )
-    ).toMatchInlineSnapshot(`<my-component propA="propA"><div /></my-component>`);
-  });
-});
diff --git a/code/renderers/vue/src/docs/sourceDecorator.ts b/code/renderers/vue/src/docs/sourceDecorator.ts
deleted file mode 100644
index becc96802860..000000000000
--- a/code/renderers/vue/src/docs/sourceDecorator.ts
+++ /dev/null
@@ -1,233 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-/* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
-
-import { addons } from '@storybook/preview-api';
-import { logger } from '@storybook/client-logger';
-import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
-import { type ComponentOptions } from 'vue';
-import type Vue from 'vue';
-import type { StoryContext } from '../types';
-
-export const skipSourceRender = (context: StoryContext) => {
-  const sourceParams = context?.parameters.docs?.source;
-  const isArgsStory = context?.parameters.__isArgsStory;
-
-  // always render if the user forces it
-  if (sourceParams?.type === SourceType.DYNAMIC) {
-    return false;
-  }
-
-  // never render if the user is forcing the block to render code, or
-  // if the user provides code, or if it's not an args story.
-  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
-};
-
-export const sourceDecorator = (storyFn: any, context: StoryContext) => {
-  const story = storyFn();
-  const source = '';
-
-  // See ../react/jsxDecorator.tsx
-  const skip = skipSourceRender(context);
-  if (skip) {
-    return story;
-  }
-
-  const channel = addons.getChannel();
-
-  const storyComponent = getStoryComponent(story.options.STORYBOOK_WRAPS);
-  const generateSource = (vueInstance: any) => {
-    try {
-      // console.log('updateSource():', vueInstance.$vnode);
-      const storyNode = lookupStoryInstance(vueInstance, storyComponent);
-      if (!storyNode) {
-        logger.warn(`Failed to find story component in the rendered tree: ${storyComponent}`);
-        return;
-      }
-      // eslint-disable-next-line no-param-reassign
-      vueInstance.source = vnodeToString(storyNode._vnode);
-    } catch (e) {
-      logger.warn(`Failed to generate dynamic story source: ${e}`);
-    }
-  };
-
-  return {
-    components: {
-      Story: story,
-    },
-    data() {
-      return { source };
-    },
-    updated() {
-      generateSource(this);
-    },
-    mounted() {
-      this.$watch('source', (val) =>
-        channel.emit(SNIPPET_RENDERED, context.id, `<template>${val}</template>`, 'vue')
-      );
-      generateSource(this);
-    },
-    template: '<story />',
-  } as ComponentOptions<Vue> & ThisType<Vue>;
-};
-
-export function vnodeToString(vnode: Vue.VNode): string {
-  const attrString = [
-    ...(vnode.data?.slot ? ([['slot', vnode.data.slot]] as [string, any][]) : []),
-    ['class', stringifyClassAttribute(vnode)],
-    ...(vnode.componentOptions?.propsData ? Object.entries(vnode.componentOptions.propsData) : []),
-    ...(vnode.data?.attrs ? Object.entries(vnode.data.attrs) : []),
-  ]
-    .filter(([name], index, list) => list.findIndex((item) => item[0] === name) === index)
-    .map(([name, value]) => stringifyAttr(name!, value))
-    .filter(Boolean)
-    .join(' ');
-
-  if (!vnode.componentOptions) {
-    // Non-component elements (div, span, etc...)
-    if (vnode.tag) {
-      if (!vnode.children) {
-        return `<${vnode.tag} ${attrString}/>`;
-      }
-
-      return `<${vnode.tag} ${attrString}>${vnode.children.map(vnodeToString).join('')}</${
-        vnode.tag
-      }>`;
-    }
-
-    // TextNode
-    if (vnode.text) {
-      if (/[<>"&]/.test(vnode.text)) {
-        return `{{\`${vnode.text.replace(/`/g, '\\`')}\`}}`;
-      }
-
-      return vnode.text;
-    }
-
-    // Unknown
-    return '';
-  }
-
-  // Probably users never see the "unknown-component". It seems that vnode.tag
-  // is always set.
-  const tag = vnode.componentOptions.tag || vnode.tag || 'unknown-component';
-
-  if (!vnode.componentOptions.children) {
-    return `<${tag} ${attrString}/>`;
-  }
-
-  return `<${tag} ${attrString}>${vnode.componentOptions.children
-    .map(vnodeToString)
-    .join('')}</${tag}>`;
-}
-
-function stringifyClassAttribute(vnode: Vue.VNode): string | undefined {
-  if (!vnode.data || (!vnode.data.staticClass && !vnode.data.class)) {
-    return undefined;
-  }
-
-  return (
-    [...(vnode.data.staticClass?.split(' ') ?? []), ...normalizeClassBinding(vnode.data.class)]
-      .filter(Boolean)
-      .join(' ') || undefined
-  );
-}
-
-// https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes
-function normalizeClassBinding(binding: unknown): readonly string[] {
-  if (!binding) {
-    return [];
-  }
-
-  if (typeof binding === 'string') {
-    return [binding];
-  }
-
-  if (binding instanceof Array) {
-    // To handle an object-in-array binding smartly, we use recursion
-    return binding.map(normalizeClassBinding).reduce((a, b) => [...a, ...b], []);
-  }
-
-  if (typeof binding === 'object') {
-    return Object.entries(binding)
-      .filter(([, active]) => !!active)
-      .map(([className]) => className);
-  }
-
-  // Unknown class binding
-  return [];
-}
-
-function stringifyAttr(attrName: string, value?: any): string | null {
-  if (typeof value === 'undefined' || typeof value === 'function') {
-    return null;
-  }
-
-  if (value === true) {
-    return attrName;
-  }
-
-  if (typeof value === 'string') {
-    return `${attrName}=${quote(value)}`;
-  }
-
-  // TODO: Better serialization (unquoted object key, Symbol/Classes, etc...)
-  //       Seems like Prettier don't format JSON-look object (= when keys are quoted)
-  return `:${attrName}=${quote(JSON.stringify(value))}`;
-}
-
-function quote(value: string) {
-  return value.includes(`"`) && !value.includes(`'`)
-    ? `'${value}'`
-    : `"${value.replace(/"/g, '&quot;')}"`;
-}
-
-/**
- * Skip decorators and grab a story component itself.
- * https://github.com/pocka/storybook-addon-vue-info/pull/113
- */
-function getStoryComponent(w: any) {
-  let matched = w;
-
-  while (
-    matched &&
-    matched.options &&
-    matched.options.components &&
-    matched.options.components.story &&
-    matched.options.components.story.options &&
-    matched.options.components.story.options.STORYBOOK_WRAPS
-  ) {
-    matched = matched.options.components.story.options.STORYBOOK_WRAPS;
-  }
-  return matched;
-}
-
-interface VueInternal {
-  // We need to access this private property, in order to grab the vnode of the
-  // component instead of the "vnode of the parent of the component".
-  // Probably it's safe to rely on this because vm.$vnode is a reference for this.
-  // https://github.com/vuejs/vue/issues/6070#issuecomment-314389883
-  _vnode: Vue.VNode;
-}
-
-/**
- * Find the story's instance from VNode tree.
- */
-function lookupStoryInstance(instance: Vue, storyComponent: any): (Vue & VueInternal) | null {
-  if (
-    instance.$vnode &&
-    instance.$vnode.componentOptions &&
-    instance.$vnode.componentOptions.Ctor === storyComponent
-  ) {
-    return instance as Vue & VueInternal;
-  }
-
-  for (let i = 0, l = instance.$children.length; i < l; i += 1) {
-    const found = lookupStoryInstance(instance.$children[i], storyComponent);
-
-    if (found) {
-      return found;
-    }
-  }
-
-  return null;
-}
diff --git a/code/renderers/vue/src/entry-preview-docs.ts b/code/renderers/vue/src/entry-preview-docs.ts
deleted file mode 100644
index bd5af4e3f916..000000000000
--- a/code/renderers/vue/src/entry-preview-docs.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { ArgTypesEnhancer, DecoratorFunction } from '@storybook/types';
-import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
-import { extractArgTypes } from './docs/extractArgTypes';
-import { sourceDecorator } from './docs/sourceDecorator';
-import type { VueRenderer } from './types';
-
-export const parameters = {
-  docs: {
-    story: { inline: true, iframeHeight: '120px' },
-    extractArgTypes,
-    extractComponentDescription,
-  },
-};
-
-export const decorators: DecoratorFunction<VueRenderer>[] = [sourceDecorator];
-
-export const argTypesEnhancers: ArgTypesEnhancer<VueRenderer>[] = [enhanceArgTypes];
diff --git a/code/renderers/vue/src/entry-preview.ts b/code/renderers/vue/src/entry-preview.ts
deleted file mode 100644
index 2110e13bcf0c..000000000000
--- a/code/renderers/vue/src/entry-preview.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const parameters: {} = { renderer: 'vue' };
-export { render, renderToCanvas } from './render';
-export { decorateStory as applyDecorators } from './decorateStory';
diff --git a/code/renderers/vue/src/globals.ts b/code/renderers/vue/src/globals.ts
deleted file mode 100644
index f91a342510a2..000000000000
--- a/code/renderers/vue/src/globals.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { global } from '@storybook/global';
-
-const { window: globalWindow } = global;
-
-globalWindow.STORYBOOK_ENV = 'vue';
diff --git a/code/renderers/vue/src/index.ts b/code/renderers/vue/src/index.ts
deleted file mode 100644
index 145fbf2612ea..000000000000
--- a/code/renderers/vue/src/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/// <reference types="webpack-env" />
-
-import './globals';
-
-export * from './public-types';
-
-// optimization: stop HMR propagation in webpack
-if (typeof module !== 'undefined') module?.hot?.decline();
diff --git a/code/renderers/vue/src/preset.ts b/code/renderers/vue/src/preset.ts
deleted file mode 100644
index 03b11e7e6097..000000000000
--- a/code/renderers/vue/src/preset.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { PresetProperty } from '@storybook/types';
-import { join } from 'path';
-
-export const previewAnnotations: PresetProperty<'previewAnnotations'> = async (
-  input = [],
-  options
-) => {
-  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;
-  const result: string[] = [];
-
-  return result
-    .concat(input)
-    .concat([join(__dirname, 'entry-preview.mjs')])
-    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []);
-};
diff --git a/code/renderers/vue/src/public-types.test.ts b/code/renderers/vue/src/public-types.test.ts
deleted file mode 100644
index 0f3b90fbe04d..000000000000
--- a/code/renderers/vue/src/public-types.test.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-import { satisfies } from '@storybook/core-common';
-import type { ComponentAnnotations, StoryAnnotations } from '@storybook/types';
-import { expectTypeOf } from 'expect-type';
-import type { SetOptional } from 'type-fest';
-import type { Component } from 'vue';
-import type { ExtendedVue } from 'vue/types/vue';
-import { Vue } from 'vue/types/vue';
-import type { Decorator, Meta, StoryObj } from './public-types';
-import Button from './__tests__/Button.vue';
-import type { VueRenderer } from './types';
-
-describe('Meta', () => {
-  test('Generic parameter of Meta can be a component', () => {
-    const meta: Meta<typeof Button> = {
-      component: Button,
-      args: { label: 'good', disabled: false },
-    };
-
-    expectTypeOf(meta).toEqualTypeOf<
-      ComponentAnnotations<
-        VueRenderer,
-        {
-          disabled: boolean;
-          label: string;
-        }
-      >
-    >();
-  });
-
-  test('Generic parameter of Meta can be the props of the component', () => {
-    const meta: Meta<{ disabled: boolean; label: string }> = {
-      component: Button,
-      args: { label: 'good', disabled: false },
-    };
-
-    expectTypeOf(meta).toEqualTypeOf<
-      ComponentAnnotations<VueRenderer, { disabled: boolean; label: string }>
-    >();
-  });
-});
-
-describe('StoryObj', () => {
-  type ButtonProps = {
-    disabled: boolean;
-    label: string;
-  };
-
-  test('✅ Required args may be provided partial in meta and the story', () => {
-    const meta = satisfies<Meta<typeof Button>>()({
-      component: Button,
-      args: { label: 'good' },
-    });
-
-    type Actual = StoryObj<typeof meta>;
-    type Expected = StoryAnnotations<VueRenderer, ButtonProps, SetOptional<ButtonProps, 'label'>>;
-    expectTypeOf<Actual>().toEqualTypeOf<Expected>();
-  });
-
-  test('❌ The combined shape of meta args and story args must match the required args.', () => {
-    {
-      const meta = satisfies<Meta<typeof Button>>()({ component: Button });
-
-      type Expected = StoryAnnotations<VueRenderer, ButtonProps, ButtonProps>;
-      expectTypeOf<StoryObj<typeof meta>>().toEqualTypeOf<Expected>();
-    }
-    {
-      const meta = satisfies<Meta<typeof Button>>()({
-        component: Button,
-        args: { label: 'good' },
-      });
-      // @ts-expect-error disabled not provided ❌
-      const Basic: StoryObj<typeof meta> = {};
-
-      type Expected = StoryAnnotations<VueRenderer, ButtonProps, SetOptional<ButtonProps, 'label'>>;
-      expectTypeOf(Basic).toEqualTypeOf<Expected>();
-    }
-    {
-      const meta = satisfies<Meta<{ label: string; disabled: boolean }>>()({ component: Button });
-      const Basic: StoryObj<typeof meta> = {
-        // @ts-expect-error disabled not provided ❌
-        args: { label: 'good' },
-      };
-
-      type Expected = StoryAnnotations<VueRenderer, ButtonProps, ButtonProps>;
-      expectTypeOf(Basic).toEqualTypeOf<Expected>();
-    }
-  });
-
-  test('Component can be used as generic parameter for StoryObj', () => {
-    expectTypeOf<StoryObj<typeof Button>>().toEqualTypeOf<
-      StoryAnnotations<VueRenderer, ButtonProps>
-    >();
-  });
-});
-
-type ThemeData = 'light' | 'dark';
-
-type ComponentProps<C> = C extends ExtendedVue<any, any, any, any, infer P>
-  ? P
-  : C extends Component<infer P>
-  ? P
-  : unknown;
-
-describe('Story args can be inferred', () => {
-  test('Correct args are inferred when type is widened for render function', () => {
-    type Props = ComponentProps<typeof Button> & { theme: ThemeData };
-
-    const meta = satisfies<Meta<Props>>()({
-      component: Button,
-      args: { disabled: false },
-      render: (args) =>
-        Vue.extend({
-          components: { Button },
-          template: `<div>Using the theme: ${args.theme}<Button v-bind="$props"/></div>`,
-          props: Object.keys(args),
-        }),
-    });
-
-    const Basic: StoryObj<typeof meta> = { args: { theme: 'light', label: 'good' } };
-
-    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
-    expectTypeOf(Basic).toEqualTypeOf<Expected>();
-  });
-
-  const withDecorator: Decorator<{ decoratorArg: string }> = (
-    storyFn,
-    { args: { decoratorArg } }
-  ) =>
-    Vue.extend({
-      components: { Story: storyFn() },
-      template: `<div>Decorator: ${decoratorArg}<Story/></div>`,
-    });
-
-  test('Correct args are inferred when type is widened for decorators', () => {
-    type Props = ComponentProps<typeof Button> & { decoratorArg: string };
-
-    const meta = satisfies<Meta<Props>>()({
-      component: Button,
-      args: { disabled: false },
-      decorators: [withDecorator],
-    });
-
-    const Basic: StoryObj<typeof meta> = { args: { decoratorArg: 'title', label: 'good' } };
-
-    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
-    expectTypeOf(Basic).toEqualTypeOf<Expected>();
-  });
-
-  test('Correct args are inferred when type is widened for multiple decorators', () => {
-    type Props = ComponentProps<typeof Button> & { decoratorArg: string; decoratorArg2: string };
-
-    const secondDecorator: Decorator<{ decoratorArg2: string }> = (
-      storyFn,
-      { args: { decoratorArg2 } }
-    ) => {
-      return Vue.extend({
-        components: { Story: storyFn() },
-        template: `<div>Decorator: ${decoratorArg2}<Story/></div>`,
-      });
-    };
-
-    const meta = satisfies<Meta<Props>>()({
-      component: Button,
-      args: { disabled: false },
-      decorators: [withDecorator, secondDecorator],
-    });
-
-    const Basic: StoryObj<typeof meta> = {
-      args: { decoratorArg: '', decoratorArg2: '', label: 'good' },
-    };
-
-    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
-    expectTypeOf(Basic).toEqualTypeOf<Expected>();
-  });
-});
diff --git a/code/renderers/vue/src/public-types.ts b/code/renderers/vue/src/public-types.ts
deleted file mode 100644
index eb6c68699a96..000000000000
--- a/code/renderers/vue/src/public-types.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import type {
-  AnnotatedStoryFn,
-  Args,
-  ArgsFromMeta,
-  ArgsStoryFn,
-  ComponentAnnotations,
-  DecoratorFunction,
-  LoaderFunction,
-  StoryAnnotations,
-  StoryContext as GenericStoryContext,
-  StrictArgs,
-  ProjectAnnotations,
-} from '@storybook/types';
-import type { SetOptional, Simplify } from 'type-fest';
-import type { Component } from 'vue';
-import type { ExtendedVue } from 'vue/types/vue';
-import type { VueRenderer } from './types';
-
-export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
-export type { VueRenderer };
-
-/**
- * Metadata to configure the stories for a component.
- *
- * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
- */
-export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
-  VueRenderer,
-  ComponentPropsOrProps<TCmpOrArgs>
->;
-
-/**
- * Story function that represents a CSFv2 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
-  VueRenderer,
-  ComponentPropsOrProps<TCmpOrArgs>
->;
-
-/**
- * Story function that represents a CSFv3 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
-  render?: ArgsStoryFn<VueRenderer, any>;
-  component?: infer C;
-  args?: infer DefaultArgs;
-}
-  ? TMetaOrCmpOrArgs extends Component<any> // needed because StoryObj<typeof Button> falls into this branch, see test
-    ? StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>
-    : Simplify<ComponentProps<C> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>> extends infer TArgs
-    ? StoryAnnotations<
-        VueRenderer,
-        TArgs,
-        SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
-      >
-    : never
-  : StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
-
-type ComponentProps<C> = C extends ExtendedVue<any, any, any, any, infer P>
-  ? P
-  : C extends Component<any, any, any, infer P>
-  ? P
-  : unknown;
-
-type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Component<any>
-  ? unknown extends ComponentProps<TCmpOrArgs>
-    ? TCmpOrArgs
-    : ComponentProps<TCmpOrArgs>
-  : TCmpOrArgs;
-
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * Story function that represents a CSFv2 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type Story<TArgs = Args> = StoryFn<TArgs>;
-
-export type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;
-export type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
-export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<VueRenderer, TArgs>;
-export type Preview = ProjectAnnotations<VueRenderer>;
diff --git a/code/renderers/vue/src/render.ts b/code/renderers/vue/src/render.ts
deleted file mode 100644
index f7f75893336e..000000000000
--- a/code/renderers/vue/src/render.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import { dedent } from 'ts-dedent';
-import Vue from 'vue';
-import type { RenderContext, ArgsStoryFn } from '@storybook/types';
-import type { CombinedVueInstance } from 'vue/types/vue';
-import type { VueRenderer } from './types';
-
-export const COMPONENT = 'STORYBOOK_COMPONENT';
-export const VALUES = 'STORYBOOK_VALUES';
-
-const map = new Map<VueRenderer['canvasElement'], Instance>();
-type Instance = CombinedVueInstance<
-  Vue,
-  {
-    STORYBOOK_COMPONENT: any;
-    STORYBOOK_VALUES: Record<string, unknown>;
-  },
-  object,
-  object,
-  Record<never, any>
->;
-
-const getRoot = (canvasElement: VueRenderer['canvasElement']): Instance => {
-  const cachedInstance = map.get(canvasElement);
-  if (cachedInstance != null) return cachedInstance;
-
-  // Create a dummy "target" underneath #storybook-root
-  // that Vue2 will replace on first render with #storybook-vue-root
-  const target = document.createElement('div');
-  canvasElement.appendChild(target);
-
-  const instance: Instance = new Vue({
-    beforeDestroy() {
-      map.delete(canvasElement);
-    },
-    data() {
-      return {
-        [COMPONENT]: undefined,
-        [VALUES]: {},
-      };
-    },
-    // @ts-expect-error What's going on here? (TS says that we should not return an array here, but the `h` directly)
-    render(h) {
-      map.set(canvasElement, instance);
-      return this[COMPONENT] ? [h(this[COMPONENT])] : undefined;
-    },
-  });
-
-  return instance;
-};
-
-export const render: ArgsStoryFn<VueRenderer> = (args, context) => {
-  const { id, component: Component, argTypes } = context;
-  const component = Component as VueRenderer['component'] & {
-    __docgenInfo?: { displayName: string };
-    props: Record<string, any>;
-  };
-
-  if (!component) {
-    throw new Error(
-      `Unable to render story ${id} as the component annotation is missing from the default export`
-    );
-  }
-
-  let componentName = 'component';
-
-  // if there is a name property, we either use it or preprend with sb- in case it's an invalid name
-  if (component.name) {
-    // @ts-expect-error isReservedTag is an internal function from Vue, might be changed in future releases
-    const isReservedTag = Vue.config.isReservedTag && Vue.config.isReservedTag(component.name);
-
-    componentName = isReservedTag ? `sb-${component.name}` : component.name;
-  } else if (component.__docgenInfo?.displayName) {
-    // otherwise, we use the displayName from docgen, if present
-    componentName = component.__docgenInfo?.displayName;
-  }
-
-  let eventsBinding = '';
-  const eventProps = Object.values(argTypes)
-    .filter((argType) => argType?.table?.category === 'events')
-    .map((argType) => argType.name);
-
-  const camelCase = (str: string) => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-
-  if (eventProps.length) {
-    eventsBinding = eventProps.map((name) => `@${name}="$props['${camelCase(name)}']"`).join(' ');
-  }
-
-  return {
-    props: Object.keys(argTypes),
-    components: { [componentName]: component },
-    template: `<${componentName} ${eventsBinding} v-bind="filterOutEventProps($props)" />`,
-    methods: {
-      filterOutEventProps(props: object) {
-        return Object.fromEntries(
-          Object.entries(props).filter(([key]) => !eventProps.includes(key))
-        );
-      },
-    },
-  };
-};
-
-export function renderToCanvas(
-  {
-    title,
-    name,
-    storyFn,
-    showMain,
-    showError,
-    showException,
-    forceRemount,
-  }: RenderContext<VueRenderer>,
-  canvasElement: VueRenderer['canvasElement']
-) {
-  const root = getRoot(canvasElement);
-  Vue.config.errorHandler = showException;
-  const element = storyFn();
-
-  let mountTarget: Element | VueRenderer['canvasElement'] | null;
-
-  // Vue2 mount always replaces the mount target with Vue-generated DOM.
-  // https://v2.vuejs.org/v2/api/#el:~:text=replaced%20with%20Vue%2Dgenerated%20DOM
-  // We cannot mount to the canvasElement directly, because it would be replaced. That would
-  // break the references to the canvasElement like canvasElement used in the play function.
-  // Instead, we mount to a child element of the canvasElement, creating one if necessary.
-  if (canvasElement.hasChildNodes()) {
-    mountTarget = canvasElement.firstElementChild;
-  } else {
-    mountTarget = document.createElement('div');
-    canvasElement.appendChild(mountTarget);
-  }
-
-  if (!element) {
-    showError({
-      title: `Expecting a Vue component from the story: "${name}" of "${title}".`,
-      description: dedent`
-        Did you forget to return the Vue component from the story?
-        Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
-      `,
-    });
-    return;
-  }
-
-  // at component creation || refresh by HMR or switching stories
-  if (!root[COMPONENT] || forceRemount) {
-    root[COMPONENT] = element;
-  }
-
-  // @ts-expect-error https://github.com/storybookjs/storrybook/pull/7578#discussion_r307986139
-  root[VALUES] = { ...element.options[VALUES] };
-
-  if (!map.has(canvasElement)) {
-    root.$mount(mountTarget ?? undefined);
-  }
-
-  showMain();
-}
diff --git a/code/renderers/vue/src/types.ts b/code/renderers/vue/src/types.ts
deleted file mode 100644
index 4ae4c9c4ab3c..000000000000
--- a/code/renderers/vue/src/types.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types';
-import type { Component, AsyncComponent } from 'vue';
-
-export type { RenderContext } from '@storybook/types';
-
-export interface ShowErrorArgs {
-  title: string;
-  description: string;
-}
-
-export type StoryFnVueReturnType =
-  | Component<any, any, any, any>
-  | AsyncComponent<any, any, any, any>;
-
-export type StoryContext = StoryContextBase<VueRenderer>;
-
-/**
- * @deprecated Use `VueRenderer` instead.
- */
-export type VueFramework = VueRenderer;
-export interface VueRenderer extends WebRenderer {
-  component: Component<any, any, any, any> | AsyncComponent<any, any, any, any>;
-  storyResult: StoryFnVueReturnType;
-}
diff --git a/code/renderers/vue/src/typings.d.ts b/code/renderers/vue/src/typings.d.ts
deleted file mode 100644
index daefb35a5f65..000000000000
--- a/code/renderers/vue/src/typings.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-declare var STORYBOOK_ENV: 'vue';
-declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
diff --git a/code/renderers/vue/src/util.ts b/code/renderers/vue/src/util.ts
deleted file mode 100644
index 303c750b28cc..000000000000
--- a/code/renderers/vue/src/util.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-types */
-import type { VueConstructor } from 'vue';
-
-function getType(fn: Function) {
-  const match = fn && fn.toString().match(/^\s*function (\w+)/);
-  return match ? match[1] : '';
-}
-
-// https://github.com/vuejs/vue/blob/dev/src/core/util/props.js#L92
-function resolveDefault({ type, default: def }: any) {
-  if (typeof def === 'function' && getType(type) !== 'Function') {
-    // known limitation: we don't have the component instance to pass
-    return def.call();
-  }
-
-  return def;
-}
-
-export function extractProps(component: VueConstructor) {
-  // @ts-expect-error this options business seems not good according to the types
-  return Object.entries(component.options.props || {})
-    .map(([name, prop]) => ({ [name]: resolveDefault(prop) }))
-    .reduce((wrap, prop) => ({ ...wrap, ...prop }), {});
-}
diff --git a/code/renderers/vue/template/cli/Button.stories.js b/code/renderers/vue/template/cli/Button.stories.js
deleted file mode 100644
index ac1fe487803b..000000000000
--- a/code/renderers/vue/template/cli/Button.stories.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import MyButton from './Button.vue';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-export default {
-  title: 'Example/Button',
-  component: MyButton,
-  tags: ['autodocs'],
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { MyButton },
-    template: '<my-button @onClick="onClick" v-bind="$props" />',
-  }),
-  argTypes: {
-    backgroundColor: { control: 'color' },
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
-    },
-  },
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};
diff --git a/code/renderers/vue/template/cli/Button.vue b/code/renderers/vue/template/cli/Button.vue
deleted file mode 100644
index 864a2638ac5f..000000000000
--- a/code/renderers/vue/template/cli/Button.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
-</template>
-
-<script>
-import './button.css';
-
-export default {
-  name: 'my-button',
-
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    primary: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: 'medium',
-      validator: function (value) {
-        return ['small', 'medium', 'large'].indexOf(value) !== -1;
-      },
-    },
-    backgroundColor: {
-      type: String,
-    },
-  },
-
-  computed: {
-    classes() {
-      return {
-        'storybook-button': true,
-        'storybook-button--primary': this.primary,
-        'storybook-button--secondary': !this.primary,
-        [`storybook-button--${this.size}`]: true,
-      };
-    },
-    style() {
-      return {
-        backgroundColor: this.backgroundColor,
-      };
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit('onClick');
-    },
-  },
-};
-</script>
diff --git a/code/renderers/vue/template/cli/Header.stories.js b/code/renderers/vue/template/cli/Header.stories.js
deleted file mode 100644
index 553cd469b48b..000000000000
--- a/code/renderers/vue/template/cli/Header.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import MyHeader from './Header.vue';
-
-export default {
-  title: 'Example/Header',
-  component: MyHeader,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: {
-      MyHeader,
-    },
-    template:
-      '<my-header :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
-  }),
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
-  },
-};
-
-export const LoggedIn = {
-  args: {
-    user: {
-      name: 'Jane Doe',
-    },
-  },
-};
-
-export const LoggedOut = {};
diff --git a/code/renderers/vue/template/cli/Header.vue b/code/renderers/vue/template/cli/Header.vue
deleted file mode 100644
index 4164c64bb144..000000000000
--- a/code/renderers/vue/template/cli/Header.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <header>
-    <div class="storybook-header">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fill-rule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        <span class="welcome" v-if="user"
-          >Welcome, <b>{{ user.name }}</b
-          >!</span
-        >
-        <my-button size="small" @onClick="onLogout" label="Log out" v-if="user" />
-        <my-button size="small" @onClick="onLogin" label="Log in" v-if="!user" />
-        <my-button primary size="small" @onClick="onCreateAccount" label="Sign up" v-if="!user" />
-      </div>
-    </div>
-  </header>
-</template>
-
-<script>
-import './header.css';
-import MyButton from './Button.vue';
-
-export default {
-  name: 'my-header',
-
-  components: { MyButton },
-
-  props: {
-    user: {
-      type: Object,
-    },
-  },
-
-  methods: {
-    onLogin() {
-      this.$emit('onLogin');
-    },
-    onLogout() {
-      this.$emit('onLogout');
-    },
-    onCreateAccount() {
-      this.$emit('onCreateAccount');
-    },
-  },
-};
-</script>
diff --git a/code/renderers/vue/template/cli/Page.stories.js b/code/renderers/vue/template/cli/Page.stories.js
deleted file mode 100644
index e0b3309c2512..000000000000
--- a/code/renderers/vue/template/cli/Page.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { within, userEvent, expect } from '@storybook/test';
-import MyPage from './Page.vue';
-
-export default {
-  title: 'Example/Page',
-  component: MyPage,
-  render: () => ({
-    components: { MyPage },
-    template: '<my-page />',
-  }),
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
-  },
-};
-export const LoggedOut = {};
-
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
-export const LoggedIn = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const loginButton = canvas.getByRole('button', { name: /Log in/i });
-    await expect(loginButton).toBeInTheDocument();
-    await userEvent.click(loginButton);
-    await expect(loginButton).not.toBeInTheDocument();
-
-    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
-    await expect(logoutButton).toBeInTheDocument();
-  },
-};
diff --git a/code/renderers/vue/template/cli/Page.vue b/code/renderers/vue/template/cli/Page.vue
deleted file mode 100644
index c57bfa7b10d5..000000000000
--- a/code/renderers/vue/template/cli/Page.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <article>
-    <my-header
-      :user="user"
-      @onLogin="onLogin"
-      @onLogout="onLogout"
-      @onCreateAccount="onCreateAccount"
-    />
-
-    <section class="storybook-page">
-      <h2>Pages in Storybook</h2>
-      <p>
-        We recommend building UIs with a
-        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-          <strong>component-driven</strong>
-        </a>
-        process starting with atomic components and ending with pages.
-      </p>
-      <p>
-        Render pages with mock data. This makes it easy to build and review page states without
-        needing to navigate to them in your app. Here are some handy patterns for managing page data
-        in Storybook:
-      </p>
-      <ul>
-        <li>
-          Use a higher-level connected component. Storybook helps you compose such data from the
-          "args" of child component stories
-        </li>
-        <li>
-          Assemble data in the page component from your services. You can mock these services out
-          using Storybook.
-        </li>
-      </ul>
-      <p>
-        Get a guided tutorial on component-driven development at
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer"
-          >Storybook tutorials</a
-        >
-        . Read more in the
-        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
-        .
-      </p>
-      <div class="tip-wrapper">
-        <span class="tip">Tip</span>
-        Adjust the width of the canvas with the
-        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fill-rule="evenodd">
-            <path
-              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-              id="a"
-              fill="#999"
-            />
-          </g>
-        </svg>
-        Viewports addon in the toolbar
-      </div>
-    </section>
-  </article>
-</template>
-
-<script>
-import './page.css';
-import MyHeader from './Header.vue';
-
-export default {
-  name: 'my-page',
-
-  components: { MyHeader },
-
-  data() {
-    return {
-      user: null,
-    };
-  },
-
-  methods: {
-    onLogin() {
-      this.user = { name: 'Jane Doe' };
-    },
-    onLogout() {
-      this.user = null;
-    },
-    onCreateAccount() {
-      this.user = { name: 'Jane Doe' };
-    },
-  },
-};
-</script>
diff --git a/code/renderers/vue/template/components/Button.vue b/code/renderers/vue/template/components/Button.vue
deleted file mode 100644
index 864a2638ac5f..000000000000
--- a/code/renderers/vue/template/components/Button.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
-</template>
-
-<script>
-import './button.css';
-
-export default {
-  name: 'my-button',
-
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    primary: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: 'medium',
-      validator: function (value) {
-        return ['small', 'medium', 'large'].indexOf(value) !== -1;
-      },
-    },
-    backgroundColor: {
-      type: String,
-    },
-  },
-
-  computed: {
-    classes() {
-      return {
-        'storybook-button': true,
-        'storybook-button--primary': this.primary,
-        'storybook-button--secondary': !this.primary,
-        [`storybook-button--${this.size}`]: true,
-      };
-    },
-    style() {
-      return {
-        backgroundColor: this.backgroundColor,
-      };
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit('onClick');
-    },
-  },
-};
-</script>
diff --git a/code/renderers/vue/template/components/Form.vue b/code/renderers/vue/template/components/Form.vue
deleted file mode 100644
index 2375a381eb7a..000000000000
--- a/code/renderers/vue/template/components/Form.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <form id="interaction-test-form" @submit.prevent="onSubmit">
-    <label>
-      Enter Value
-      <input
-        type="text"
-        data-testid="value"
-        :value="value"
-        @input="value = $event.target.value"
-        required
-      />
-    </label>
-    <button type="submit">Submit</button>
-    <p v-if="complete">Completed!!</p>
-  </form>
-</template>
-
-<script>
-export default {
-  name: 'my-form',
-
-  props: {
-    onSuccess: {
-      type: Function,
-    },
-  },
-
-  data() {
-    return {
-      value: '',
-      complete: false,
-    };
-  },
-
-  methods: {
-    onSubmit() {
-      this.onSuccess(this.value);
-      setTimeout(() => {
-        this.complete = true;
-      }, 500);
-      setTimeout(() => {
-        this.complete = false;
-      }, 1500);
-    },
-  },
-};
-</script>
diff --git a/code/renderers/vue/template/components/Html.vue b/code/renderers/vue/template/components/Html.vue
deleted file mode 100644
index 5b14a6b1a9ab..000000000000
--- a/code/renderers/vue/template/components/Html.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div v-html="content"></div>
-</template>
-
-<script>
-export default {
-  name: 'my-html',
-
-  props: {
-    content: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
diff --git a/code/renderers/vue/template/components/Pre.vue b/code/renderers/vue/template/components/Pre.vue
deleted file mode 100644
index eda0553dce3d..000000000000
--- a/code/renderers/vue/template/components/Pre.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <pre data-testid="pre" :style="style">{{ finalText }}</pre>
-</template>
-
-<script>
-export default {
-  name: 'my-pre',
-
-  props: {
-    // deepscan-disable-next-line
-    style: {
-      type: Object,
-    },
-    object: {
-      type: Object,
-    },
-    text: {
-      type: String,
-      default: '',
-    },
-  },
-
-  computed: {
-    finalText() {
-      return this.object ? JSON.stringify(this.object, null, 2) : this.text;
-    },
-  },
-};
-</script>
diff --git a/code/renderers/vue/template/components/button.css b/code/renderers/vue/template/components/button.css
deleted file mode 100644
index dc91dc76370b..000000000000
--- a/code/renderers/vue/template/components/button.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}
diff --git a/code/renderers/vue/template/components/index.js b/code/renderers/vue/template/components/index.js
deleted file mode 100644
index 342dc4a7a988..000000000000
--- a/code/renderers/vue/template/components/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-import Vue from 'vue';
-
-import Button from './Button.vue';
-import Pre from './Pre.vue';
-import Form from './Form.vue';
-import Html from './Html.vue';
-
-globalThis.Components = { Button, Pre, Form, Html };
-globalThis.storybookRenderer = 'vue';
-
-// test globally-registered components
-Vue.component('global-button', Button);
diff --git a/code/renderers/vue/template/stories/core-template.stories.js b/code/renderers/vue/template/stories/core-template.stories.js
deleted file mode 100644
index eedcf0486e6f..000000000000
--- a/code/renderers/vue/template/stories/core-template.stories.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  // we just need something here to make this valid CSF
-  component: {},
-};
-
-export const StringOnly = () => '<global-button :primary="true" label="Primary button" />';
diff --git a/code/renderers/vue/template/stories/custom-decorators.stories.js b/code/renderers/vue/template/stories/custom-decorators.stories.js
deleted file mode 100644
index 1415f6987614..000000000000
--- a/code/renderers/vue/template/stories/custom-decorators.stories.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-
-const MyButton = globalThis.Components.Button;
-
-export default {
-  component: {},
-  decorators: [
-    (storyFn) => {
-      // Decorated with story-function
-      const WrapButton = storyFn({ customContext: 52, parameters: { customParameter: 42 } });
-      return {
-        components: { WrapButton },
-        template: '<div :style="{ border: borderStyle }"><wrap-button/></div>',
-        data() {
-          return { borderStyle: 'medium solid red' };
-        },
-      };
-    },
-    () => ({
-      // Decorated with `story` component
-      template: '<div :style="{ border: borderStyle }"><story/></div>',
-      data() {
-        return {
-          borderStyle: 'medium solid blue',
-        };
-      },
-    }),
-  ],
-};
-
-export const Template = () => ({
-  template: '<global-button label="MyButton with template" />',
-});
-
-export const WithData = (_args, { parameters: { fileName, ...parameters }, hooks, ...rest }) => ({
-  template: `<pre v-pre>${JSON.stringify({ ...rest, parameters }, null, 2)}</pre>`,
-});
-
-export const Render = () => ({
-  render(h) {
-    return h(MyButton, { props: { color: 'pink', label: 'renders component: MyButton' } });
-  },
-});
diff --git a/code/renderers/vue/template/stories/custom-rendering.stories.js b/code/renderers/vue/template/stories/custom-rendering.stories.js
deleted file mode 100644
index 39032b05f8f7..000000000000
--- a/code/renderers/vue/template/stories/custom-rendering.stories.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-
-const MyButton = globalThis.Components.Button;
-
-export default {
-  component: {},
-};
-
-export const Render = () => ({
-  render: (h) => h('div', ['renders a div with some text in it..']),
-});
-
-export const RenderComponent = () => ({
-  render(h) {
-    return h(MyButton, { props: { color: 'pink', label: 'renders component: MyButton' } });
-  },
-});
-
-export const Template = () => ({
-  template: `
-      <div>
-        <h1>A template</h1>
-        <p>rendered in vue in storybook</p>
-      </div>`,
-});
-
-export const TemplateComponent = () => ({
-  components: { MyButton },
-  template: '<my-button label="MyButton rendered in a template" />',
-});
-
-export const TemplateMethods = () => ({
-  components: { MyButton },
-  template: `
-      <p>
-        <em>Clicking the button will navigate to another story using the 'addon-links'</em><br/>
-        <my-button :rounded="true" @click="action" label="MyButton rendered in a template + props & methods" />
-      </p>`,
-  methods: {
-    action: () => {},
-  },
-});
-
-// FIXME: test JSX?
-// export const JSX = () => ({
-//   components: { MyButton },
-//   render() {
-//     // eslint-disable-next-line react/react-in-jsx-scope, react/no-children-prop
-//     return <my-button label="MyButton rendered with JSX" />;
-//   },
-// });
-
-export const PreRegisteredComponent = () => ({
-  /* By pre-registering component in preview.js,
-   * the need to register all components with each story is removed.
-   * You'll only need the template */
-  template: `
-      <p>
-        <em>This component was pre-registered in .storybook/preview.js</em><br/>
-        <global-button label="GlobalButton rendered in a template" />
-      </p>`,
-});
diff --git a/code/renderers/vue/template/stories/vue-mdx.stories.mdx b/code/renderers/vue/template/stories/vue-mdx.stories.mdx
deleted file mode 100644
index 067d9af4eb6b..000000000000
--- a/code/renderers/vue/template/stories/vue-mdx.stories.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-
-<Meta title="renderers/vue/vue-mdx" component={globalThis.Components.Button} />
-
-# Vue-specific MDX Stories
-
-export const Button = globalThis.Components.Button;
-
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MyButton: Button },
-  template: '<my-button v-bind="$props" />',
-});
-
-## Primary
-
-<Canvas>
-  <Story name="Primary">
-    {{
-      components: { MyButton: Button },
-      template: '<my-button :primary="true" label="Primary button" />',
-    }}
-  </Story>
-</Canvas>
-
-## Secondary
-
-<Canvas>
-  <Story name="Secondary">
-    {{
-      components: { MyButton: Button },
-      template: '<my-button :primary="false" label="Secondary button" />',
-    }}
-  </Story>
-</Canvas>
-
-## From template
-
-<Canvas>
-  <Story name="From Template" args={{ label: 'From template' }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
diff --git a/code/renderers/vue/tsconfig.json b/code/renderers/vue/tsconfig.json
deleted file mode 100644
index 4fbfb70f6d7b..000000000000
--- a/code/renderers/vue/tsconfig.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "strict": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "allowJs": true
-  },
-  "vueCompilerOptions": {
-    "target": 2
-  },
-  "include": ["src/**/*", "src/**/*.vue", "template/**/*", "template/**/*.vue"]
-}

From b5ca2b08f857afa5bfa71a1c9eb1b5dd4ebd6f16 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 4 Dec 2023 17:30:59 +0100
Subject: [PATCH 2/8] Remove deprecated packages from next

---
 code/addons/essentials/package.json |  1 -
 code/lib/cli/src/versions.ts        |  3 --
 code/package.json                   |  2 -
 code/yarn.lock                      | 80 +----------------------------
 4 files changed, 1 insertion(+), 85 deletions(-)

diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
index d45b5d4961c9..0f563cfe599f 100644
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@@ -76,7 +76,6 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/vue": "workspace:*",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts
index b477f0d53255..a0a9cd528d81 100644
--- a/code/lib/cli/src/versions.ts
+++ b/code/lib/cli/src/versions.ts
@@ -74,9 +74,6 @@ export default {
   '@storybook/test': '8.0.0-alpha.0',
   '@storybook/theming': '8.0.0-alpha.0',
   '@storybook/types': '8.0.0-alpha.0',
-  '@storybook/vue': '8.0.0-alpha.0',
-  '@storybook/vue-vite': '8.0.0-alpha.0',
-  '@storybook/vue-webpack5': '8.0.0-alpha.0',
   '@storybook/vue3': '8.0.0-alpha.0',
   '@storybook/vue3-vite': '8.0.0-alpha.0',
   '@storybook/vue3-webpack5': '8.0.0-alpha.0',
diff --git a/code/package.json b/code/package.json
index e85ffa0607f6..fa475d05f205 100644
--- a/code/package.json
+++ b/code/package.json
@@ -177,8 +177,6 @@
     "@storybook/testing-library": "next",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
-    "@storybook/vue": "workspace:*",
-    "@storybook/vue-webpack5": "workspace:*",
     "@storybook/vue3": "workspace:*",
     "@storybook/vue3-vite": "workspace:*",
     "@storybook/vue3-webpack5": "workspace:*",
diff --git a/code/yarn.lock b/code/yarn.lock
index e5475b73dcfd..39c54defec52 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -4899,7 +4899,6 @@ __metadata:
     "@storybook/manager-api": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/preview-api": "workspace:*"
-    "@storybook/vue": "workspace:*"
     ts-dedent: "npm:^2.0.0"
     typescript: "npm:^5.3.2"
   peerDependencies:
@@ -6560,8 +6559,6 @@ __metadata:
     "@storybook/testing-library": "npm:next"
     "@storybook/theming": "workspace:*"
     "@storybook/types": "workspace:*"
-    "@storybook/vue": "workspace:*"
-    "@storybook/vue-webpack5": "workspace:*"
     "@storybook/vue3": "workspace:*"
     "@storybook/vue3-vite": "workspace:*"
     "@storybook/vue3-webpack5": "workspace:*"
@@ -6899,48 +6896,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/vue-vite@workspace:frameworks/vue-vite":
-  version: 0.0.0-use.local
-  resolution: "@storybook/vue-vite@workspace:frameworks/vue-vite"
-  dependencies:
-    "@storybook/builder-vite": "workspace:*"
-    "@storybook/core-common": "workspace:*"
-    "@storybook/core-server": "workspace:*"
-    "@storybook/vue": "workspace:*"
-    magic-string: "npm:^0.30.0"
-    typescript: "npm:^5.3.2"
-    vite: "npm:^4.0.0"
-    vue: "npm:^2.7.10"
-    vue-docgen-api: "npm:^4.40.0"
-  peerDependencies:
-    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
-    vue: ^2.7.0
-  languageName: unknown
-  linkType: soft
-
-"@storybook/vue-webpack5@workspace:*, @storybook/vue-webpack5@workspace:frameworks/vue-webpack5":
-  version: 0.0.0-use.local
-  resolution: "@storybook/vue-webpack5@workspace:frameworks/vue-webpack5"
-  dependencies:
-    "@storybook/builder-webpack5": "workspace:*"
-    "@storybook/core-common": "workspace:*"
-    "@storybook/preset-vue-webpack": "workspace:*"
-    "@storybook/vue": "workspace:*"
-    "@types/node": "npm:^18.0.0"
-    typescript: "npm:^5.3.2"
-    vue: "npm:^2.6.12"
-    vue-loader: "npm:^15.7.0"
-    vue-template-compiler: "npm:^2.6.14"
-  peerDependencies:
-    "@babel/core": "*"
-    babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0
-    css-loader: "*"
-    vue: ^2.6.8
-    vue-loader: ^15.7.0
-    vue-template-compiler: ^2.6.8
-  languageName: unknown
-  linkType: soft
-
 "@storybook/vue3-vite@workspace:*, @storybook/vue3-vite@workspace:frameworks/vue3-vite":
   version: 0.0.0-use.local
   resolution: "@storybook/vue3-vite@workspace:frameworks/vue3-vite"
@@ -7005,32 +6960,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/vue@workspace:*, @storybook/vue@workspace:renderers/vue":
-  version: 0.0.0-use.local
-  resolution: "@storybook/vue@workspace:renderers/vue"
-  dependencies:
-    "@storybook/client-logger": "workspace:*"
-    "@storybook/docs-tools": "workspace:*"
-    "@storybook/global": "npm:^5.0.0"
-    "@storybook/preview-api": "workspace:*"
-    "@storybook/types": "workspace:*"
-    tiny-invariant: "npm:^1.3.1"
-    ts-dedent: "npm:^2.0.0"
-    type-fest: "npm:~2.19"
-    typescript: "npm:^5.3.2"
-    vue: "npm:2.6.14"
-    vue-tsc: "npm:latest"
-  peerDependencies:
-    "@babel/core": "*"
-    babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0
-    css-loader: "*"
-    vue: ^2.6.8
-  peerDependenciesMeta:
-    babel-loader:
-      optional: true
-  languageName: unknown
-  linkType: soft
-
 "@storybook/web-components-vite@workspace:*, @storybook/web-components-vite@workspace:frameworks/web-components-vite":
   version: 0.0.0-use.local
   resolution: "@storybook/web-components-vite@workspace:frameworks/web-components-vite"
@@ -29019,13 +28948,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue@npm:2.6.14":
-  version: 2.6.14
-  resolution: "vue@npm:2.6.14"
-  checksum: efbe26ccc7c1bd025b88e464ebc81217b92350a77b98049122a46ac2242e249719f930d3914e2efdeaaa521a51e6e6b1cb9ffbf95b4835ed94dc92efb481040f
-  languageName: node
-  linkType: hard
-
 "vue@npm:3.0.0":
   version: 3.0.0
   resolution: "vue@npm:3.0.0"
@@ -29037,7 +28959,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue@npm:^2.6.12, vue@npm:^2.7.10":
+"vue@npm:^2.6.12":
   version: 2.7.15
   resolution: "vue@npm:2.7.15"
   dependencies:

From 9c786f8aa8f4a6888276a48ea906cf5154d3cb2a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 5 Dec 2023 15:12:41 +0100
Subject: [PATCH 3/8] Fix sandboxes

---
 .circleci/config.yml                  | 30 +++++++++++++--------------
 code/lib/cli/src/sandbox-templates.ts | 14 -------------
 2 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 6db12bf41959..e3f8ef172a8d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -504,19 +504,19 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 14
+          parallelism: 13
           requires:
             - build
       - build-sandboxes:
-          parallelism: 14
+          parallelism: 13
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 11
+          parallelism: 10
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -524,7 +524,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
       - bench:
@@ -560,19 +560,19 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 21
+          parallelism: 20
           requires:
             - build
       - build-sandboxes:
-          parallelism: 21
+          parallelism: 20
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 18
+          parallelism: 17
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 16
+          parallelism: 15
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -580,7 +580,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 16
+          parallelism: 15
           requires:
             - build-sandboxes
       - bench:
@@ -614,22 +614,22 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 36
+          parallelism: 34
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 36
+          parallelism: 34
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 33
+          parallelism: 31
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 31
+          parallelism: 29
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -637,7 +637,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 31
+          parallelism: 29
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness
diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index 86b28646fb10..57a1eabf1081 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -391,18 +391,6 @@ const baseTemplates = {
     // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
   },
-  'vue-cli/vue2-default-js': {
-    name: 'Vue CLI v2 (Webpack | JavaScript)',
-    script:
-      'npx -p @vue/cli vue create {{beforeDir}} --default --packageManager=yarn --force --merge --preset="Default (Vue 2)" && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
-    expected: {
-      framework: '@storybook/vue-webpack5',
-      renderer: '@storybook/vue',
-      builder: '@storybook/builder-webpack5',
-    },
-    // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
-    skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
-  },
   'preact-webpack5/default-js': {
     name: 'Preact CLI Latest (Webpack | JavaScript)',
     script:
@@ -567,7 +555,6 @@ export const normal: TemplateKey[] = [
   'react-vite/default-ts',
   'angular-cli/default-ts',
   'vue3-vite/default-ts',
-  'vue-cli/vue2-default-js',
   'lit-vite/default-ts',
   'svelte-vite/default-ts',
   'svelte-kit/skeleton-ts',
@@ -594,7 +581,6 @@ export const daily: TemplateKey[] = [
   'cra/default-js',
   'react-vite/default-js',
   'vue3-vite/default-js',
-  'vue2-vite/2.7-js',
   'vue-cli/default-js',
   'lit-vite/default-js',
   'svelte-kit/skeleton-js',

From b9b73babcdab987b13c1961731c922e858c8aced Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 5 Dec 2023 16:35:43 +0100
Subject: [PATCH 4/8] Remove more references

---
 .circleci/config.yml                          | 30 +++++++++---------
 code/e2e-tests/addon-docs.spec.ts             |  3 --
 .../src/automigrate/fixes/missing-babelrc.ts  |  1 -
 .../helpers/new-frameworks-utils.ts           |  4 ---
 code/lib/cli/src/detect.test.ts               | 23 --------------
 code/lib/cli/src/detect.ts                    |  2 --
 code/lib/cli/src/generators/SFC_VUE/index.ts  | 11 -------
 code/lib/cli/src/generators/VUE/index.ts      | 14 ---------
 code/lib/cli/src/generators/baseGenerator.ts  |  1 -
 code/lib/cli/src/initiate.ts                  | 12 -------
 code/lib/cli/src/project_types.ts             | 31 -------------------
 code/lib/cli/src/repro-generators/configs.ts  | 18 -----------
 code/lib/cli/src/sandbox-templates.ts         | 11 -------
 .../src/utils/get-storybook-info.ts           |  3 --
 14 files changed, 15 insertions(+), 149 deletions(-)
 delete mode 100644 code/lib/cli/src/generators/SFC_VUE/index.ts
 delete mode 100644 code/lib/cli/src/generators/VUE/index.ts

diff --git a/.circleci/config.yml b/.circleci/config.yml
index dac362b5530b..3429809658b8 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -504,19 +504,19 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 14
+          parallelism: 13
           requires:
             - build
       - build-sandboxes:
-          parallelism: 14
+          parallelism: 13
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 11
+          parallelism: 10
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -524,7 +524,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
       - bench:
@@ -560,19 +560,19 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 21
+          parallelism: 20
           requires:
             - build
       - build-sandboxes:
-          parallelism: 21
+          parallelism: 20
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 18
+          parallelism: 17
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 16
+          parallelism: 15
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -580,7 +580,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 16
+          parallelism: 15
           requires:
             - build-sandboxes
       - bench:
@@ -614,22 +614,22 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 35
+          parallelism: 33
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 35
+          parallelism: 33
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 32
+          parallelism: 30
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 30
+          parallelism: 28
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -637,7 +637,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 30
+          parallelism: 28
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness
diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts
index 30babefa2280..7edd143360ab 100644
--- a/code/e2e-tests/addon-docs.spec.ts
+++ b/code/e2e-tests/addon-docs.spec.ts
@@ -122,9 +122,6 @@ test.describe('addon-docs', () => {
       //   - template: https://638db567ed97c3fb3e21cc22-ulhjwkqzzj.chromatic.com/?path=/docs/addons-docs-docspage-basic--docs
       //   - real: https://638db567ed97c3fb3e21cc22-ulhjwkqzzj.chromatic.com/?path=/docs/example-button--docs
       'lit-vite',
-      // Vue doesn't update when you change args, apparently fixed by this:
-      //   https://github.com/storybookjs/storybook/pull/20995
-      'vue2-vite',
     ];
     test.skip(
       new RegExp(`^${skipped.join('|')}`, 'i').test(`${templateName}`),
diff --git a/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts b/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts
index 14332f15b5f5..9d12ec658b1f 100644
--- a/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts
+++ b/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts
@@ -14,7 +14,6 @@ const logger = console;
 
 const frameworksThatNeedBabelConfig = [
   '@storybook/react-webpack5',
-  '@storybook/vue-webpack5',
   '@storybook/vue3-webpack5',
   '@storybook/html-webpack5',
   '@storybook/web-components-webpack5',
diff --git a/code/lib/cli/src/automigrate/helpers/new-frameworks-utils.ts b/code/lib/cli/src/automigrate/helpers/new-frameworks-utils.ts
index e5fba48f2d71..7f62392c6839 100644
--- a/code/lib/cli/src/automigrate/helpers/new-frameworks-utils.ts
+++ b/code/lib/cli/src/automigrate/helpers/new-frameworks-utils.ts
@@ -24,10 +24,6 @@ export const packagesMap: Record<string, { webpack5?: string; vite?: string }> =
   '@storybook/angular': {
     webpack5: '@storybook/angular',
   },
-  '@storybook/vue': {
-    webpack5: '@storybook/vue-webpack5',
-    vite: '@storybook/vue-vite',
-  },
   '@storybook/vue3': {
     webpack5: '@storybook/vue3-webpack5',
     vite: '@storybook/vue3-vite',
diff --git a/code/lib/cli/src/detect.test.ts b/code/lib/cli/src/detect.test.ts
index 7a78fa8fa536..1203d444e6d8 100644
--- a/code/lib/cli/src/detect.test.ts
+++ b/code/lib/cli/src/detect.test.ts
@@ -30,29 +30,6 @@ const MOCK_FRAMEWORK_FILES: {
   name: string;
   files: Record<'package.json', PackageJsonWithMaybeDeps> | Record<string, string>;
 }[] = [
-  {
-    name: ProjectType.SFC_VUE,
-    files: {
-      'package.json': {
-        dependencies: {
-          vuetify: '1.0.0',
-        },
-        devDependencies: {
-          'vue-loader': '1.0.0',
-        },
-      },
-    },
-  },
-  {
-    name: ProjectType.VUE,
-    files: {
-      'package.json': {
-        dependencies: {
-          vue: '1.0.0',
-        },
-      },
-    },
-  },
   {
     name: ProjectType.VUE3,
     files: {
diff --git a/code/lib/cli/src/detect.ts b/code/lib/cli/src/detect.ts
index dc02fbe4325b..733ed65e2974 100644
--- a/code/lib/cli/src/detect.ts
+++ b/code/lib/cli/src/detect.ts
@@ -127,8 +127,6 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
 
   // Fallback to Vite or Webpack based on project type
   switch (projectType) {
-    case ProjectType.SFC_VUE:
-      return CoreBuilder.Vite;
     case ProjectType.REACT_SCRIPTS:
     case ProjectType.ANGULAR:
     case ProjectType.REACT_NATIVE: // technically react native doesn't use webpack, we just want to set something
diff --git a/code/lib/cli/src/generators/SFC_VUE/index.ts b/code/lib/cli/src/generators/SFC_VUE/index.ts
deleted file mode 100644
index a3e2f15ea604..000000000000
--- a/code/lib/cli/src/generators/SFC_VUE/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { CoreBuilder } from '../../project_types';
-import { baseGenerator } from '../baseGenerator';
-import type { Generator } from '../types';
-
-const generator: Generator = async (packageManager, npmOptions, options) => {
-  await baseGenerator(packageManager, npmOptions, options, 'vue', {
-    useSWC: ({ builder }) => builder === CoreBuilder.Webpack5,
-  });
-};
-
-export default generator;
diff --git a/code/lib/cli/src/generators/VUE/index.ts b/code/lib/cli/src/generators/VUE/index.ts
deleted file mode 100644
index 6b771973a283..000000000000
--- a/code/lib/cli/src/generators/VUE/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { CoreBuilder } from '../../project_types';
-import { baseGenerator } from '../baseGenerator';
-import type { Generator } from '../types';
-
-const generator: Generator = async (packageManager, npmOptions, options) => {
-  await baseGenerator(packageManager, npmOptions, options, 'vue', {
-    extraPackages: async ({ builder }) => {
-      return builder === CoreBuilder.Webpack5 ? ['vue-loader@^15.7.0'] : [];
-    },
-    useSWC: ({ builder }) => builder === CoreBuilder.Webpack5,
-  });
-};
-
-export default generator;
diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts
index 813ba2d1dd59..43fbbe9c3a67 100644
--- a/code/lib/cli/src/generators/baseGenerator.ts
+++ b/code/lib/cli/src/generators/baseGenerator.ts
@@ -337,7 +337,6 @@ export async function baseGenerator(
   if (builder !== CoreBuilder.Vite && !skipBabel) {
     const frameworksThatNeedBabelConfig = [
       '@storybook/react-webpack5',
-      '@storybook/vue-webpack5',
       '@storybook/vue3-webpack5',
       '@storybook/html-webpack5',
       '@storybook/web-components-webpack5',
diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts
index 8811b88c5d85..c3f04ea89964 100644
--- a/code/lib/cli/src/initiate.ts
+++ b/code/lib/cli/src/initiate.ts
@@ -19,8 +19,6 @@ import reactGenerator from './generators/REACT';
 import reactNativeGenerator from './generators/REACT_NATIVE';
 import reactScriptsGenerator from './generators/REACT_SCRIPTS';
 import nextjsGenerator from './generators/NEXTJS';
-import sfcVueGenerator from './generators/SFC_VUE';
-import vueGenerator from './generators/VUE';
 import vue3Generator from './generators/VUE3';
 import webpackReactGenerator from './generators/WEBPACK_REACT';
 import htmlGenerator from './generators/HTML';
@@ -100,16 +98,6 @@ const installStorybook = async <Project extends ProjectType>(
           commandLog('Adding Storybook support to your "Next" app')
         );
 
-      case ProjectType.SFC_VUE:
-        return sfcVueGenerator(packageManager, npmOptions, generatorOptions).then(
-          commandLog('Adding Storybook support to your "Single File Components Vue" app')
-        );
-
-      case ProjectType.VUE:
-        return vueGenerator(packageManager, npmOptions, generatorOptions).then(
-          commandLog('Adding Storybook support to your "Vue" app')
-        );
-
       case ProjectType.VUE3:
         return vue3Generator(packageManager, npmOptions, generatorOptions).then(
           commandLog('Adding Storybook support to your "Vue 3" app')
diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts
index 8d2809f97379..5933d2ab13d6 100644
--- a/code/lib/cli/src/project_types.ts
+++ b/code/lib/cli/src/project_types.ts
@@ -1,13 +1,5 @@
 import { minVersion, validRange } from 'semver';
 
-function ltMajor(versionRange: string, major: number) {
-  // Uses validRange to avoid a throw from minVersion if an invalid range gets passed
-  if (validRange(versionRange)) {
-    return (minVersion(versionRange)?.major ?? Infinity) < major;
-  }
-  return false;
-}
-
 function eqMajor(versionRange: string, major: number) {
   // Uses validRange to avoid a throw from minVersion if an invalid range gets passed
   if (validRange(versionRange)) {
@@ -70,9 +62,7 @@ export enum ProjectType {
   REACT_PROJECT = 'REACT_PROJECT',
   WEBPACK_REACT = 'WEBPACK_REACT',
   NEXTJS = 'NEXTJS',
-  VUE = 'VUE',
   VUE3 = 'VUE3',
-  SFC_VUE = 'SFC_VUE',
   ANGULAR = 'ANGULAR',
   EMBER = 'EMBER',
   WEB_COMPONENTS = 'WEB_COMPONENTS',
@@ -123,27 +113,6 @@ export type TemplateConfiguration = {
  * therefore WEBPACK_REACT has to come first, as it's more specific.
  */
 export const supportedTemplates: TemplateConfiguration[] = [
-  {
-    preset: ProjectType.SFC_VUE,
-    dependencies: {
-      'vue-loader': (versionRange) => ltMajor(versionRange, 16),
-      vuetify: (versionRange) => ltMajor(versionRange, 3),
-    },
-    matcherFunction: ({ dependencies }) => {
-      return dependencies?.some(Boolean) ?? false;
-    },
-  },
-  {
-    preset: ProjectType.VUE,
-    // This Vue template only works with Vue or Nuxt under v3
-    dependencies: {
-      vue: (versionRange) => ltMajor(versionRange, 3),
-      nuxt: (versionRange) => ltMajor(versionRange, 3),
-    },
-    matcherFunction: ({ dependencies }) => {
-      return dependencies?.some(Boolean) ?? false;
-    },
-  },
   {
     preset: ProjectType.VUE3,
     dependencies: {
diff --git a/code/lib/cli/src/repro-generators/configs.ts b/code/lib/cli/src/repro-generators/configs.ts
index b3cd46836fbf..b95e65a18a87 100644
--- a/code/lib/cli/src/repro-generators/configs.ts
+++ b/code/lib/cli/src/repro-generators/configs.ts
@@ -217,16 +217,6 @@ export const web_components_lit2: Parameters = {
 
 // #region  vue
 
-export const vue: Parameters = {
-  renderer: 'vue',
-  name: 'vue',
-  version: 'latest',
-  generator: [
-    // vue2 with webpack5
-    `npx -p @vue/cli vue create {{appName}} --default --packageManager=yarn --force --merge --preset="Default (Vue 2)"`,
-  ].join(' && '),
-};
-
 export const vue3: Parameters = {
   renderer: 'vue3',
   name: 'vue3',
@@ -263,14 +253,6 @@ export const preact_vite: Parameters = {
   generator: 'yarn create vite@{{version}} {{appName}} --template preact',
 };
 
-export const sfcVue: Parameters = {
-  renderer: 'vue',
-  name: 'sfcVue',
-  version: 'latest',
-  //
-  generator: fromDeps('vue@2.6', 'vue-loader@15.9', 'vue-template-compiler@2.6', 'webpack'),
-};
-
 export const svelte: Parameters = {
   renderer: 'svelte',
   name: 'svelte',
diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index 446b557119b7..7cbe63ea95e7 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -237,17 +237,6 @@ const baseTemplates = {
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
-  'vue2-vite/2.7-js': {
-    name: 'Vue v2 (Vite | JavaScript)',
-    script: 'npx create-vue@2 {{beforeDir}} --default',
-    expected: {
-      framework: '@storybook/vue-vite',
-      renderer: '@storybook/vue',
-      builder: '@storybook/builder-vite',
-    },
-    // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
-    skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
-  },
   'html-webpack/default': {
     name: 'HTML Latest (Webpack | JavaScript)',
     script: 'yarn create webpack5-html {{beforeDir}}',
diff --git a/code/lib/core-common/src/utils/get-storybook-info.ts b/code/lib/core-common/src/utils/get-storybook-info.ts
index 8d97fed4d3ed..dd462a6b0370 100644
--- a/code/lib/core-common/src/utils/get-storybook-info.ts
+++ b/code/lib/core-common/src/utils/get-storybook-info.ts
@@ -5,7 +5,6 @@ import { getStorybookConfiguration } from './get-storybook-configuration';
 
 export const rendererPackages: Record<string, string> = {
   '@storybook/react': 'react',
-  '@storybook/vue': 'vue',
   '@storybook/vue3': 'vue3',
   '@storybook/angular': 'angular',
   '@storybook/html': 'html',
@@ -36,8 +35,6 @@ export const frameworkPackages: Record<string, string> = {
   '@storybook/sveltekit': 'sveltekit',
   '@storybook/vue3-vite': 'vue3-vite',
   '@storybook/vue3-webpack5': 'vue3-webpack5',
-  '@storybook/vue-vite': 'vue-vite',
-  '@storybook/vue-webpack5': 'vue-webpack5',
   '@storybook/web-components-vite': 'web-components-vite',
   '@storybook/web-components-webpack5': 'web-components-webpack5',
   // community (outside of monorepo)

From 1f91ca240d853a1e52aade05f1268ed19c5d209f Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 5 Dec 2023 17:03:57 +0100
Subject: [PATCH 5/8] Fix unit tests

---
 .../automigrate/fixes/new-frameworks.test.ts  | 22 +++++++++----------
 .../helpers/mainConfigFile.test.ts            |  4 ++--
 code/lib/cli/src/project_types.ts             |  2 --
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts b/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts
index 5e63d6d22fff..413ffb2f9363 100644
--- a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts
+++ b/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts
@@ -258,7 +258,7 @@ describe('new-frameworks fix', () => {
 
     it('should update correctly when there is no builder', async () => {
       const packageManager = getPackageManager({
-        '@storybook/vue': '7.0.0',
+        '@storybook/vue3': '7.0.0',
         '@storybook/builder-webpack5': '7.0.0',
       });
 
@@ -266,13 +266,13 @@ describe('new-frameworks fix', () => {
         checkNewFrameworks({
           packageManager,
           main: {
-            framework: '@storybook/vue',
+            framework: '@storybook/vue3',
           },
         })
       ).resolves.toEqual(
         expect.objectContaining({
-          frameworkPackage: '@storybook/vue-webpack5',
-          dependenciesToAdd: ['@storybook/vue-webpack5'],
+          frameworkPackage: '@storybook/vue3-webpack5',
+          dependenciesToAdd: ['@storybook/vue3-webpack5'],
           dependenciesToRemove: ['@storybook/builder-webpack5'],
         })
       );
@@ -280,7 +280,7 @@ describe('new-frameworks fix', () => {
 
     it('should update when there is no framework field in main', async () => {
       const packageManager = getPackageManager({
-        '@storybook/vue': '7.0.0',
+        '@storybook/vue3': '7.0.0',
         '@storybook/manager-webpack5': '7.0.0',
       });
 
@@ -291,8 +291,8 @@ describe('new-frameworks fix', () => {
         })
       ).resolves.toEqual(
         expect.objectContaining({
-          frameworkPackage: '@storybook/vue-webpack5',
-          dependenciesToAdd: ['@storybook/vue-webpack5'],
+          frameworkPackage: '@storybook/vue3-webpack5',
+          dependenciesToAdd: ['@storybook/vue3-webpack5'],
           dependenciesToRemove: ['@storybook/manager-webpack5'],
           hasFrameworkInMainConfig: false,
         })
@@ -301,7 +301,7 @@ describe('new-frameworks fix', () => {
 
     it('should update when the framework field has a legacy value', async () => {
       const packageManager = getPackageManager({
-        '@storybook/vue': '7.0.0',
+        '@storybook/vue3': '7.0.0',
         '@storybook/manager-webpack5': '7.0.0',
       });
 
@@ -309,13 +309,13 @@ describe('new-frameworks fix', () => {
         checkNewFrameworks({
           packageManager,
           main: {
-            framework: 'vue',
+            framework: 'vue3',
           },
         })
       ).resolves.toEqual(
         expect.objectContaining({
-          frameworkPackage: '@storybook/vue-webpack5',
-          dependenciesToAdd: ['@storybook/vue-webpack5'],
+          frameworkPackage: '@storybook/vue3-webpack5',
+          dependenciesToAdd: ['@storybook/vue3-webpack5'],
           dependenciesToRemove: ['@storybook/manager-webpack5'],
           hasFrameworkInMainConfig: false,
         })
diff --git a/code/lib/cli/src/automigrate/helpers/mainConfigFile.test.ts b/code/lib/cli/src/automigrate/helpers/mainConfigFile.test.ts
index 1d1d4c2095ac..5320d97e5dac 100644
--- a/code/lib/cli/src/automigrate/helpers/mainConfigFile.test.ts
+++ b/code/lib/cli/src/automigrate/helpers/mainConfigFile.test.ts
@@ -146,8 +146,8 @@ describe('getRendererPackageNameFromFramework', () => {
   });
 
   it('should return the corresponding key of rendererPackages if the value is the same as the frameworkPackageName', () => {
-    const frameworkPackageName = 'vue';
-    const expectedPackageName = '@storybook/vue';
+    const frameworkPackageName = 'vue3';
+    const expectedPackageName = '@storybook/vue3';
     const packageName = getRendererPackageNameFromFramework(frameworkPackageName);
     expect(packageName).toBe(expectedPackageName);
   });
diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts
index 5933d2ab13d6..8f1f07b3ae0f 100644
--- a/code/lib/cli/src/project_types.ts
+++ b/code/lib/cli/src/project_types.ts
@@ -28,7 +28,6 @@ export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit' | 'qwik' |
 export type SupportedRenderers =
   | 'react'
   | 'react-native'
-  | 'vue'
   | 'vue3'
   | 'angular'
   | 'ember'
@@ -43,7 +42,6 @@ export type SupportedRenderers =
 export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
   'react',
   'react-native',
-  'vue',
   'vue3',
   'angular',
   'ember',

From 184b5d66f7313422b0baa9bd200594fc98a245eb Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 5 Dec 2023 18:27:05 +0100
Subject: [PATCH 6/8] Fix frameworksToRenderer

---
 code/lib/cli/src/helpers.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts
index 605fab2d1849..3e9361f061c0 100644
--- a/code/lib/cli/src/helpers.ts
+++ b/code/lib/cli/src/helpers.ts
@@ -206,8 +206,7 @@ const frameworkToRenderer: Record<SupportedFrameworks | SupportedRenderers, Supp
   solid: 'solid',
   svelte: 'svelte',
   sveltekit: 'svelte',
-  vue: 'vue',
-  vue3: 'vue',
+  vue3: 'vue3',
   'web-components': 'web-components',
 };
 

From 10cfd348d7ebd4f46171b32a99548c37ff98f75e Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 6 Dec 2023 15:16:06 +0100
Subject: [PATCH 7/8] Fix mapping

---
 code/lib/cli/src/helpers.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts
index 3e9361f061c0..33c7b6c6ccd9 100644
--- a/code/lib/cli/src/helpers.ts
+++ b/code/lib/cli/src/helpers.ts
@@ -193,7 +193,10 @@ type CopyTemplateFilesOptions = {
   destination?: string;
 };
 
-const frameworkToRenderer: Record<SupportedFrameworks | SupportedRenderers, SupportedRenderers> = {
+const frameworkToRenderer: Record<
+  SupportedFrameworks | SupportedRenderers,
+  SupportedRenderers | 'vue'
+> = {
   angular: 'angular',
   ember: 'ember',
   html: 'html',
@@ -206,7 +209,7 @@ const frameworkToRenderer: Record<SupportedFrameworks | SupportedRenderers, Supp
   solid: 'solid',
   svelte: 'svelte',
   sveltekit: 'svelte',
-  vue3: 'vue3',
+  vue3: 'vue',
   'web-components': 'web-components',
 };
 

From 6b29931e92744b37dd0b04756404180c93e2da96 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 6 Dec 2023 16:36:26 +0100
Subject: [PATCH 8/8] Fix merge conflicts

---
 .circleci/config.yml | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 3429809658b8..e3f8ef172a8d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -614,22 +614,22 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 33
+          parallelism: 34
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 33
+          parallelism: 34
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 30
+          parallelism: 31
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 28
+          parallelism: 29
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -637,7 +637,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 28
+          parallelism: 29
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness