chore: remove vue/cli-service from cypress docs and add migration gui…

…de (#5989)

docs/app/component-testing/get-started.mdx

@@ -43,7 +43,6 @@ following development servers and frameworks:
 | [React with Vite](/app/component-testing/react/overview#React-with-Vite)                                           | React 16-18   | Vite 4-5    |
 | [React with Webpack](/app/component-testing/react/overview#React-with-Webpack)                                     | React 16-18   | Webpack 4-5 |
 | [Next.js 14](/app/component-testing/react/overview#Nextjs)                                                         | React 18      | Webpack 5   |
-| [Vue CLI 4-5](/app/component-testing/vue/overview#Vue-CLI)                                                         | Vue 3         | Webpack 4-5 |
 | [Vue with Vite](/app/component-testing/vue/overview#Vue-with-Vite)                                                 | Vue 3         | Vite 4-5    |
 | [Vue with Webpack](/app/component-testing/vue/overview#Vue-with-Webpack)                                           | Vue 3         | Webpack 4-5 |
 | [Angular](/app/component-testing/angular/overview#Framework-Configuration)                                         | Angular 17-18 | Webpack 5   |

docs/app/component-testing/vue/overview.mdx

@@ -10,15 +10,13 @@ sidebar_label: Overview
 
 - How to set up component tests in Vue
 - How to configure Cypress for Vue projects
-- How to use Cypress with Vue CLI, Vite, and custom Webpack config
 
 :::
 
 ## Framework Support
 
 Cypress Component Testing supports Vue 3+ with the following frameworks:
 
-- [Vue CLI](#Vue-CLI)
 - [Vue with Vite](#Vue-with-Vite)
 - [Vue with Webpack](#Vue-with-Webpack)
 
@@ -59,47 +57,10 @@ For usage and examples, visit the
 ## Framework Configuration
 
 Cypress Component Testing works out of the box with
-[Vue CLI](https://cli.vuejs.org/),
 [Vite](https://vitejs.dev/), and a custom [Webpack](https://webpack.js.org/)
 config. Cypress will automatically detect one of these frameworks during setup
 and configure them properly. The examples below are for reference purposes.
 
-### Vue CLI
-
-Cypress Component Testing works with Vue CLI.
-
-#### Vue CLI Configuration
-
-:::cypress-config-example
-
-```ts
-{
-  component: {
-    devServer: {
-      framework: 'vue-cli',
-      bundler: 'webpack',
-    },
-  },
-}
-```
-
-:::
-
-:::caution
-
-<strong>PWA Caveat</strong>
-
-If you use the Vue CLI's PWA feature, there is a known caveat regarding
-configuration. See
-[here](https://github.com/cypress-io/cypress/issues/15968#issuecomment-819170918)
-for more information.
-
-:::
-
-#### Sample Vue CLI Apps
-
-- [Vue 3 CLI 5 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-cli5-ts)
-
 ### Vue with Vite
 
 Cypress Component Testing works with Vue apps that use Vite 2+ as the bundler.

docs/app/references/migration-guide.mdx

@@ -154,7 +154,7 @@ import { mount } from `cypress/angular`
 
 Your component tests will now need a bundler to run. If still using [create-react-app](https://create-react-app.dev/), you will either need to [eject](https://create-react-app.dev/docs/available-scripts/#npm-run-eject) the configuration to bundle with webpack or leverage [vite](https://vite.dev/guide/) (quick setup with [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite)) to bundle your component tests.
 
-After selecting a bundler, you will need to change the `framework` option in your cypress config from `"create-react-app"` to `"react"`. If ejecting the `create-react-app` , you will need to change your cypress config to look something like this:
+After selecting a bundler, you will need to change the `framework` option in your Cypress config from `"create-react-app"` to `"react"`. If ejecting the `create-react-app` , you will need to change your cypress config to look something like this:
 
 ```js
 process.env.NODE_ENV = 'development'
@@ -172,6 +172,42 @@ module.exports = defineConfig({
 })
 ```
 
+### `@vue/cli-service` for Component Testing is no longer supported
+
+`@vue/cli-service` is in [maintanence mode](https://cli.vuejs.org/guide/cli-service.html) and is no longer maintained by the Vue core team.
+
+Your component tests will now need a bundler to run. If still using [Vue CLI](https://cli.vuejs.org/), you will either need to migrate to webpack ([see example](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-webpack-ts)) or leverage [vite](https://vite.dev/guide/). The Vue team recommends migrating to using `create-vue` to scaffold a [Vite](https://vite.dev/)-based project.
+
+After selecting a bundler, you will need to change the `framework` option in your Cypress config from `"vue-cli"` to `"vue"`. Your Cypress configuration should go from looking like:
+
+```ts
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  component: {
+    devServer: {
+      framework: 'vue-cli',
+      bundler: 'webpack',
+    },
+  },
+})
+```
+
+to looking something like this:
+
+```ts
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  component: {
+    devServer: {
+      framework: 'vue',
+      bundler: 'vite', // or 'webpack'
+    },
+  },
+})
+```
+
 ### Svelte 3 for Component Testing is no longer supported
 
 With Cypress 14, Cypress no longer ships the Svelte 3 component testing harness with the Cypress binary.