diff --git a/scripts/vue-cli-2.sh b/scripts/setup-vue-cli-2.sh
similarity index 77%
rename from scripts/vue-cli-2.sh
rename to scripts/setup-vue-cli-2.sh
index 33ddba2..0dc56af 100755
--- a/scripts/vue-cli-2.sh
+++ b/scripts/setup-vue-cli-2.sh
@@ -43,12 +43,12 @@ apply_patch
 commit_all "Update app to move global styles into main.css file"
 
 step
-cmd yarn add -D cypress @cypress/vue @cypress/webpack-dev-server webpack-dev-server
+cmd yarn add -D https://cdn.cypress.io/beta/npm/10.0.0/linux-x64/circle-10.0-release-e7718f7489276cac2e8ad71bc57a627eb0135fbd/cypress.tgz @cypress/vue@^2.2.4 @cypress/webpack-dev-server webpack-dev-server
 apply_patch
 commit_all "Add Cypress with example component and page tests"
 
 step
-cmd yarn add -D @cypress/code-coverage babel-plugin-istanbul
+cmd yarn add -D @cypress/code-coverage@3.10.0-dev.1 babel-plugin-istanbul
 apply_patch
 commit_all "Configure Cypress Code Coverage plugin"
 
diff --git a/scripts/vue-cli-3/1.patch b/scripts/setup-vue-cli-2/1.patch
similarity index 64%
rename from scripts/vue-cli-3/1.patch
rename to scripts/setup-vue-cli-2/1.patch
index 686bbf4..8942fc0 100644
--- a/scripts/vue-cli-3/1.patch
+++ b/scripts/setup-vue-cli-2/1.patch
@@ -1,7 +1,7 @@
-diff --git a/vue-cli-2/src/App.vue b/vue-cli-2/src/App.vue
+diff --git a/setup-vue-cli-2/src/App.vue b/setup-vue-cli-2/src/App.vue
 index 55df315..b9ac61a 100644
---- a/vue-cli-2/src/App.vue
-+++ b/vue-cli-2/src/App.vue
+--- a/setup-vue-cli-2/src/App.vue
++++ b/setup-vue-cli-2/src/App.vue
 @@ -18,11 +18,6 @@ export default {
  
  <style>
@@ -14,11 +14,11 @@ index 55df315..b9ac61a 100644
    margin-top: 60px;
  }
  </style>
-diff --git a/vue-cli-2/src/main.css b/vue-cli-2/src/main.css
+diff --git a/setup-vue-cli-2/src/main.css b/setup-vue-cli-2/src/main.css
 new file mode 100644
 index 0000000..110b5e1
 --- /dev/null
-+++ b/vue-cli-2/src/main.css
++++ b/setup-vue-cli-2/src/main.css
 @@ -0,0 +1,7 @@
 +body {
 +  font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -27,10 +27,10 @@ index 0000000..110b5e1
 +  text-align: center;
 +  color: #2c3e50;
 +}
-diff --git a/vue-cli-2/src/main.js b/vue-cli-2/src/main.js
+diff --git a/setup-vue-cli-2/src/main.js b/setup-vue-cli-2/src/main.js
 index 63eb05f..1d9028a 100644
---- a/vue-cli-2/src/main.js
-+++ b/vue-cli-2/src/main.js
+--- a/setup-vue-cli-2/src/main.js
++++ b/setup-vue-cli-2/src/main.js
 @@ -1,5 +1,6 @@
  import Vue from 'vue'
  import App from './App.vue'
diff --git a/scripts/vue-cli-2/2.patch b/scripts/setup-vue-cli-2/2.patch
similarity index 59%
rename from scripts/vue-cli-2/2.patch
rename to scripts/setup-vue-cli-2/2.patch
index 6c988a3..cd94eb7 100644
--- a/scripts/vue-cli-2/2.patch
+++ b/scripts/setup-vue-cli-2/2.patch
@@ -1,49 +1,58 @@
-diff --git a/vue-cli-2/cypress.json b/vue-cli-2/cypress.json
+diff --git a/setup-vue-cli-2/cypress.config.js b/setup-vue-cli-2/cypress.config.js
 new file mode 100644
-index 0000000..a57b21f
+index 0000000..eabdc78
 --- /dev/null
-+++ b/vue-cli-2/cypress.json
-@@ -0,0 +1,6 @@
-+{
-+  "component": {
-+    "testFiles": "**/*.spec.ct.{js,ts,jsx,tsx}",
-+    "componentFolder": "src"
-+  }
-+}
-diff --git a/vue-cli-2/cypress/fixtures/example.json b/vue-cli-2/cypress/fixtures/example.json
++++ b/setup-vue-cli-2/cypress.config.js
+@@ -0,0 +1,11 @@
++const { defineConfig } = require('cypress')
++const { devServer } = require('@cypress/webpack-dev-server')
++const webpackConfig = require('@vue/cli-service/webpack.config')
++
++module.exports = defineConfig({
++  // Component testing, JavaScript, Vue CLI, Webpack
++  component: {
++    devServer,
++    devServerConfig: { webpackConfig }
++  },
++})
+\ No newline at end of file
+diff --git a/setup-vue-cli-2/cypress/fixtures/example.json b/setup-vue-cli-2/cypress/fixtures/example.json
 new file mode 100644
 index 0000000..02e4254
 --- /dev/null
-+++ b/vue-cli-2/cypress/fixtures/example.json
++++ b/setup-vue-cli-2/cypress/fixtures/example.json
 @@ -0,0 +1,5 @@
 +{
 +  "name": "Using fixtures to represent data",
 +  "email": "hello@cypress.io",
 +  "body": "Fixtures are a great way to mock data for responses to routes"
 +}
-diff --git a/vue-cli-2/cypress/plugins/index.js b/vue-cli-2/cypress/plugins/index.js
+diff --git a/setup-vue-cli-2/cypress/component/index.html b/setup-vue-cli-2/cypress/component/index.html
 new file mode 100644
-index 0000000..3590bd9
+index 0000000..410b588
 --- /dev/null
-+++ b/vue-cli-2/cypress/plugins/index.js
-@@ -0,0 +1,12 @@
-+const { startDevServer } = require('@cypress/webpack-dev-server')
-+const webpackConfig = require('@vue/cli-service/webpack.config')
++++ b/setup-vue-cli-2/cypress/component/index.html
+@@ -0,0 +1,14 @@
++<!DOCTYPE html>
++<html>
++  <head>
++    <meta charset="utf-8">
++    <meta http-equiv="X-UA-Compatible" content="IE=edge">
++    <meta name="viewport" content="width=device-width,initial-scale=1.0">
++    <title>Components App</title>
 +
-+module.exports = (on, config) => {
-+  on('dev-server:start', (options) => {
-+    return startDevServer({
-+      options,
-+      webpackConfig,
-+    })
-+  })
-+  return config
-+}
-diff --git a/vue-cli-2/cypress/support/commands.js b/vue-cli-2/cypress/support/commands.js
++  </head>
++  <body>
++
++    <div id="__cy_root"></div>
++  </body>
++</html>
+\ No newline at end of file
+diff --git a/setup-vue-cli-2/cypress/support/commands.js b/setup-vue-cli-2/cypress/support/commands.js
 new file mode 100644
 index 0000000..119ab03
 --- /dev/null
-+++ b/vue-cli-2/cypress/support/commands.js
++++ b/setup-vue-cli-2/cypress/support/commands.js
 @@ -0,0 +1,25 @@
 +// ***********************************************
 +// This example commands.js shows you how to
@@ -70,40 +79,23 @@ index 0000000..119ab03
 +//
 +// -- This will overwrite an existing command --
 +// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-diff --git a/vue-cli-2/cypress/support/index.js b/vue-cli-2/cypress/support/index.js
+diff --git a/setup-vue-cli-2/cypress/support/component.js b/setup-vue-cli-2/cypress/support/component.js
 new file mode 100644
-index 0000000..9b7843f
+index 0000000..7e654cd
 --- /dev/null
-+++ b/vue-cli-2/cypress/support/index.js
-@@ -0,0 +1,23 @@
-+// ***********************************************************
-+// This example support/index.js is processed and
-+// loaded automatically before your test files.
-+//
-+// This is a great place to put global configuration and
-+// behavior that modifies Cypress.
-+//
-+// You can change the location of this file or turn off
-+// automatically serving support files with the
-+// 'supportFile' configuration option.
-+//
-+// You can read more here:
-+// https://on.cypress.io/configuration
-+// ***********************************************************
-+
++++ b/setup-vue-cli-2/cypress/support/component.js
+@@ -0,0 +1,5 @@
 +// Import commands.js using ES2015 syntax:
 +import './commands'
 +
-+// Alternatively you can use CommonJS syntax:
-+// require('./commands')
-+
 +// Ensure global app styles are loaded:
 +import '../../src/main.css'
-diff --git a/vue-cli-2/src/App.spec.ct.js b/vue-cli-2/src/App.spec.ct.js
+\ No newline at end of file
+diff --git a/setup-vue-cli-2/src/App.cy.js b/setup-vue-cli-2/src/App.cy.js
 new file mode 100644
 index 0000000..4a912ba
 --- /dev/null
-+++ b/vue-cli-2/src/App.spec.ct.js
++++ b/setup-vue-cli-2/src/App.cy.js
 @@ -0,0 +1,11 @@
 +import { mount } from '@cypress/vue'
 +import App from './App.vue'
@@ -116,11 +108,11 @@ index 0000000..4a912ba
 +  cy.get('[data-test=count]').should("have.text", "Total clicks: 1")
 +  cy.get('button').click()
 +})
-diff --git a/vue-cli-2/src/components/HelloWorld.spec.ct.js b/vue-cli-2/src/components/HelloWorld.spec.ct.js
+diff --git a/setup-vue-cli-2/src/components/HelloWorld.cy.js b/setup-vue-cli-2/src/components/HelloWorld.cy.js
 new file mode 100644
 index 0000000..bbbb6c3
 --- /dev/null
-+++ b/vue-cli-2/src/components/HelloWorld.spec.ct.js
++++ b/setup-vue-cli-2/src/components/HelloWorld.cy.js
 @@ -0,0 +1,11 @@
 +import { mount } from '@cypress/vue'
 +import HelloWorld from './HelloWorld.vue'
@@ -133,10 +125,10 @@ index 0000000..bbbb6c3
 +  })
 +  cy.get('h1').contains('Hello World')
 +})
-diff --git a/vue-cli-2/src/App.vue b/vue-cli-2/src/App.vue
+diff --git a/setup-vue-cli-2/src/App.vue b/setup-vue-cli-2/src/App.vue
 index b9ac61a..7988bf5 100644
---- a/vue-cli-2/src/App.vue
-+++ b/vue-cli-2/src/App.vue
+--- a/setup-vue-cli-2/src/App.vue
++++ b/setup-vue-cli-2/src/App.vue
 @@ -2,16 +2,19 @@
    <div id="app">
      <img alt="Vue logo" src="./assets/logo.png">
@@ -158,11 +150,11 @@ index b9ac61a..7988bf5 100644
    }
  }
  </script>
-diff --git a/vue-cli-2/src/components/Counter.vue b/vue-cli-2/src/components/Counter.vue
+diff --git a/setup-vue-cli-2/src/components/Counter.vue b/setup-vue-cli-2/src/components/Counter.vue
 new file mode 100644
 index 0000000..5eb6269
 --- /dev/null
-+++ b/vue-cli-2/src/components/Counter.vue
++++ b/setup-vue-cli-2/src/components/Counter.vue
 @@ -0,0 +1,20 @@
 +<template>
 +  <div>
@@ -185,11 +177,11 @@ index 0000000..5eb6269
 +}
 +</script>
 \ No newline at end of file
-diff --git a/vue-cli-2/src/components/Counter.spec.ct.js b/vue-cli-2/src/components/Counter.spec.ct.js
+diff --git a/setup-vue-cli-2/src/components/Counter.cy.js b/setup-vue-cli-2/src/components/Counter.cy.js
 new file mode 100644
 index 0000000..afd7e21
 --- /dev/null
-+++ b/vue-cli-2/src/components/Counter.spec.ct.js
++++ b/setup-vue-cli-2/src/components/Counter.cy.js
 @@ -0,0 +1,10 @@
 +import { mount } from '@cypress/vue'
 +import Counter from './Counter.vue'
diff --git a/scripts/setup-vue-cli-2/3.patch b/scripts/setup-vue-cli-2/3.patch
new file mode 100644
index 0000000..8d75b9d
--- /dev/null
+++ b/scripts/setup-vue-cli-2/3.patch
@@ -0,0 +1,94 @@
+diff --git a/setup-vue-cli-2/.gitignore b/setup-vue-cli-2/.gitignore
+index 403adbc..372a13f 100644
+--- a/setup-vue-cli-2/.gitignore
++++ b/setup-vue-cli-2/.gitignore
+@@ -21,3 +21,6 @@ pnpm-debug.log*
+ *.njsproj
+ *.sln
+ *.sw?
++
++.nyc_output
++coverage
+diff --git a/setup-vue-cli-2/.nycrc b/setup-vue-cli-2/.nycrc
+new file mode 100644
+index 0000000..3a40283
+--- /dev/null
++++ b/setup-vue-cli-2/.nycrc
+@@ -0,0 +1,13 @@
++{
++  "include": [
++    "src/**/*.{js,vue}"
++  ],
++  "exclude": [
++    "src/**/*.cy.js"
++  ],
++  "extension": [
++    ".js",
++    ".vue"
++  ],
++  "all": true
++}
+\ No newline at end of file
+diff --git a/setup-vue-cli-2/babel.config.js b/setup-vue-cli-2/babel.config.js
+index e955840..f4b8fdb 100644
+--- a/setup-vue-cli-2/babel.config.js
++++ b/setup-vue-cli-2/babel.config.js
+@@ -1,5 +1,12 @@
+-module.exports = {
+-  presets: [
+-    '@vue/cli-plugin-babel/preset'
+-  ]
++const plugins = []
++
++if (process.env.CYPRESS) {
++  plugins.push('istanbul')
+ }
++
++module.exports = {
++   presets: [
++     '@vue/cli-plugin-babel/preset'
++  ],
++  plugins
++}
+\ No newline at end of file
+diff --git a/setup-vue-cli-2/cypress.config.js b/setup-vue-cli-2/cypress.config.js
+index eabdc78..6c3dd60 100644
+--- a/setup-vue-cli-2/cypress.config.js
++++ b/setup-vue-cli-2/cypress.config.js
+@@ -1,11 +1,20 @@
+ const { defineConfig } = require('cypress')
+ const { devServer } = require('@cypress/webpack-dev-server')
+ const webpackConfig = require('@vue/cli-service/webpack.config')
++const codeCoverageTask = require("@cypress/code-coverage/task")
+
+ module.exports = defineConfig({
++  coverage: true,
++  codeCoverage: {
++    exclude: "cypress/**/*.*",
++  },
+   // Component testing, JavaScript, Vue CLI, Webpack
+   component: {
+     devServer,
+-    devServerConfig: { webpackConfig }
++    devServerConfig: { webpackConfig },
++    setupNodeEvents(on, config) {
++      codeCoverageTask(on, config);
++      return config;
++    },
+   },
+ })
+\ No newline at end of file
+diff --git a/setup-vue-cli-2/cypress/support/component.js b/setup-vue-cli-2/cypress/support/component.js
+index 7e654cd..a5eff01 100644
+--- a/setup-vue-cli-2/cypress/support/component.js
++++ b/setup-vue-cli-2/cypress/support/component.js
+@@ -2,4 +2,6 @@
+ import './commands'
+
+ // Ensure global app styles are loaded:
+-import '../../src/main.css'
+\ No newline at end of file
++import '../../src/main.css'
++
++import '@cypress/code-coverage/support'
+\ No newline at end of file
diff --git a/scripts/vue-cli-2/pr.md b/scripts/setup-vue-cli-2/pr.md
similarity index 56%
rename from scripts/vue-cli-2/pr.md
rename to scripts/setup-vue-cli-2/pr.md
index 2c915bb..48a959f 100644
--- a/scripts/vue-cli-2/pr.md
+++ b/scripts/setup-vue-cli-2/pr.md
@@ -8,18 +8,18 @@
    3. ${COMMIT_1}
 3. Add Cypress component testing support with sample tests
    1. ${COMMAND_2}
-   2. Add [cypress.json](cypress.json)
-   3. Add [cypress/plugins/index.js](cypress/plugins/index.js)
+   2. Add [cypress.config.js](cypress.config.js)
+   3. Add [cypress/component/index.html](cypress/component/index.html)
+   1. Add [cypress/support/component.js](cypress/support/component.js)
    1. Update [src/App.vue](src/App.vue) to reference new [src/components/Counter.vue](src/components/Counter.vue) component
-   1. Add [src/App.spec.ct.js](src/App.spec.ct.js), [src/components/HelloWorld.spec.ct.js](src/components/HelloWorld.spec.ct.js), [src/components/Counter.spec.ct.js](src/components/Counter.spec.ct.js) spec files
-   5. `npx cypress open-ct` (Notice that the fonts don't inherit global app styles)
-   6. Edit [cypress/support/index.js](cypress/support/index.js) to import global app styles, the Cypress test preview should update automatically
+   1. Add [src/App.cy.js](src/App.cy.js), [src/components/HelloWorld.cy.js](src/components/HelloWorld.cy.js), [src/components/Counter.cy.js](src/components/Counter.cy.js) spec files
+   5. `npx cypress open` (Notice that the fonts don't inherit global app styles)
+   6. Edit [cypress/support/component.js](cypress/support/component.js) to import global app styles, the Cypress test preview should update automatically
    7. ${COMMIT_2}
 4. Add Cypress Code Coverage
    1. ${COMMAND_3}
-   2. Edit [cypress.json](cypress.json) to enable `coverage`
-   3. Edit [cypress/plugins/index.js](cypress/plugins/index.js) to configure the Cypress code coverage task with Istanbul
-   4. Edit [cypress/support/index.js](cypress/support/index.js) to import Cypress code coverage support
+   2. Edit [cypress.config.js](cypress.config.js) to enable `coverage` and configure the Cypress code coverage task with Istanbul
+   4. Edit [cypress/support/component.js](cypress/support/component.js) to import Cypress code coverage support
    5. Update [babel.config.js](babel.config.js) to conditionally use `babel-plugin-istanbul` when Cypress Component tests are running
    6. Add [.nycrc](.nycrc) to configure istanbul
    7. Edit [.gitignore](.gitignore) to ignore coverage and .nyc_output directories
diff --git a/scripts/vue-cli-3.sh b/scripts/setup-vue-cli-3.sh
similarity index 78%
rename from scripts/vue-cli-3.sh
rename to scripts/setup-vue-cli-3.sh
index 067139f..d6460c2 100755
--- a/scripts/vue-cli-3.sh
+++ b/scripts/setup-vue-cli-3.sh
@@ -43,12 +43,12 @@ apply_patch
 commit_all "Update app to move global styles into main.css file"
 
 step
-cmd yarn add -D cypress @cypress/vue@3 @cypress/webpack-dev-server webpack-dev-server
+cmd yarn add -D https://cdn.cypress.io/beta/npm/10.0.0/linux-x64/circle-10.0-release-e7718f7489276cac2e8ad71bc57a627eb0135fbd/cypress.tgz @cypress/vue@3 @cypress/webpack-dev-server webpack-dev-server
 apply_patch
 commit_all "Add Cypress with example components and page tests"
 
 step
-cmd yarn add -D @cypress/code-coverage babel-plugin-istanbul
+cmd yarn add -D @cypress/code-coverage@3.10.0-dev.1 babel-plugin-istanbul
 apply_patch
 commit_all "Configure Cypress Code Coverage plugin"
 
diff --git a/scripts/vue-cli-2/1.patch b/scripts/setup-vue-cli-3/1.patch
similarity index 64%
rename from scripts/vue-cli-2/1.patch
rename to scripts/setup-vue-cli-3/1.patch
index 686bbf4..8004fe2 100644
--- a/scripts/vue-cli-2/1.patch
+++ b/scripts/setup-vue-cli-3/1.patch
@@ -1,7 +1,7 @@
-diff --git a/vue-cli-2/src/App.vue b/vue-cli-2/src/App.vue
+diff --git a/setup-vue-cli-3/src/App.vue b/setup-vue-cli-3/src/App.vue
 index 55df315..b9ac61a 100644
---- a/vue-cli-2/src/App.vue
-+++ b/vue-cli-2/src/App.vue
+--- a/setup-vue-cli-3/src/App.vue
++++ b/setup-vue-cli-3/src/App.vue
 @@ -18,11 +18,6 @@ export default {
  
  <style>
@@ -14,11 +14,11 @@ index 55df315..b9ac61a 100644
    margin-top: 60px;
  }
  </style>
-diff --git a/vue-cli-2/src/main.css b/vue-cli-2/src/main.css
+diff --git a/setup-vue-cli-3/src/main.css b/setup-vue-cli-3/src/main.css
 new file mode 100644
 index 0000000..110b5e1
 --- /dev/null
-+++ b/vue-cli-2/src/main.css
++++ b/setup-vue-cli-3/src/main.css
 @@ -0,0 +1,7 @@
 +body {
 +  font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -27,10 +27,10 @@ index 0000000..110b5e1
 +  text-align: center;
 +  color: #2c3e50;
 +}
-diff --git a/vue-cli-2/src/main.js b/vue-cli-2/src/main.js
+diff --git a/setup-vue-cli-3/src/main.js b/setup-vue-cli-3/src/main.js
 index 63eb05f..1d9028a 100644
---- a/vue-cli-2/src/main.js
-+++ b/vue-cli-2/src/main.js
+--- a/setup-vue-cli-3/src/main.js
++++ b/setup-vue-cli-3/src/main.js
 @@ -1,5 +1,6 @@
  import Vue from 'vue'
  import App from './App.vue'
diff --git a/scripts/vue-cli-3/2.patch b/scripts/setup-vue-cli-3/2.patch
similarity index 67%
rename from scripts/vue-cli-3/2.patch
rename to scripts/setup-vue-cli-3/2.patch
index 5f44841..30ef758 100644
--- a/scripts/vue-cli-3/2.patch
+++ b/scripts/setup-vue-cli-3/2.patch
@@ -1,49 +1,58 @@
-diff --git a/vue-cli-2/cypress.json b/vue-cli-2/cypress.json
+diff --git a/setup-vue-cli-3/cypress.config.js b/setup-vue-cli-3/cypress.config.js
 new file mode 100644
-index 0000000..a57b21f
+index 0000000..eabdc78
 --- /dev/null
-+++ b/vue-cli-2/cypress.json
-@@ -0,0 +1,6 @@
-+{
-+  "component": {
-+    "testFiles": "**/*.spec.ct.{js,ts,jsx,tsx}",
-+    "componentFolder": "src"
-+  }
-+}
-diff --git a/vue-cli-2/cypress/fixtures/example.json b/vue-cli-2/cypress/fixtures/example.json
++++ b/setup-vue-cli-3/cypress.config.js
+@@ -0,0 +1,11 @@
++const { defineConfig } = require('cypress')
++const { devServer } = require('@cypress/webpack-dev-server')
++const webpackConfig = require('@vue/cli-service/webpack.config')
++
++module.exports = defineConfig({
++  // Component testing, JavaScript, Vue CLI, Webpack
++  component: {
++    devServer,
++    devServerConfig: { webpackConfig }
++  },
++})
+\ No newline at end of file
+diff --git a/setup-vue-cli-3/cypress/fixtures/example.json b/setup-vue-cli-3/cypress/fixtures/example.json
 new file mode 100644
 index 0000000..02e4254
 --- /dev/null
-+++ b/vue-cli-2/cypress/fixtures/example.json
++++ b/setup-vue-cli-3/cypress/fixtures/example.json
 @@ -0,0 +1,5 @@
 +{
 +  "name": "Using fixtures to represent data",
 +  "email": "hello@cypress.io",
 +  "body": "Fixtures are a great way to mock data for responses to routes"
 +}
-diff --git a/vue-cli-2/cypress/plugins/index.js b/vue-cli-2/cypress/plugins/index.js
+diff --git a/setup-vue-cli-3/cypress/component/index.html b/setup-vue-cli-3/cypress/component/index.html
 new file mode 100644
-index 0000000..3590bd9
+index 0000000..410b588
 --- /dev/null
-+++ b/vue-cli-2/cypress/plugins/index.js
-@@ -0,0 +1,12 @@
-+const { startDevServer } = require('@cypress/webpack-dev-server')
-+const webpackConfig = require('@vue/cli-service/webpack.config')
++++ b/setup-vue-cli-3/cypress/component/index.html
+@@ -0,0 +1,14 @@
++<!DOCTYPE html>
++<html>
++  <head>
++    <meta charset="utf-8">
++    <meta http-equiv="X-UA-Compatible" content="IE=edge">
++    <meta name="viewport" content="width=device-width,initial-scale=1.0">
++    <title>Components App</title>
 +
-+module.exports = (on, config) => {
-+  on('dev-server:start', (options) => {
-+    return startDevServer({
-+      options,
-+      webpackConfig,
-+    })
-+  })
-+  return config
-+}
-diff --git a/vue-cli-2/cypress/support/commands.js b/vue-cli-2/cypress/support/commands.js
++  </head>
++  <body>
++
++    <div id="__cy_root"></div>
++  </body>
++</html>
+\ No newline at end of file
+diff --git a/setup-vue-cli-3/cypress/support/commands.js b/setup-vue-cli-3/cypress/support/commands.js
 new file mode 100644
 index 0000000..119ab03
 --- /dev/null
-+++ b/vue-cli-2/cypress/support/commands.js
++++ b/setup-vue-cli-3/cypress/support/commands.js
 @@ -0,0 +1,25 @@
 +// ***********************************************
 +// This example commands.js shows you how to
@@ -70,40 +79,23 @@ index 0000000..119ab03
 +//
 +// -- This will overwrite an existing command --
 +// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-diff --git a/vue-cli-2/cypress/support/index.js b/vue-cli-2/cypress/support/index.js
+diff --git a/setup-vue-cli-2/cypress/support/component.js b/setup-vue-cli-2/cypress/support/component.js
 new file mode 100644
-index 0000000..9b7843f
+index 0000000..7e654cd
 --- /dev/null
-+++ b/vue-cli-2/cypress/support/index.js
-@@ -0,0 +1,23 @@
-+// ***********************************************************
-+// This example support/index.js is processed and
-+// loaded automatically before your test files.
-+//
-+// This is a great place to put global configuration and
-+// behavior that modifies Cypress.
-+//
-+// You can change the location of this file or turn off
-+// automatically serving support files with the
-+// 'supportFile' configuration option.
-+//
-+// You can read more here:
-+// https://on.cypress.io/configuration
-+// ***********************************************************
-+
++++ b/setup-vue-cli-2/cypress/support/component.js
+@@ -0,0 +1,5 @@
 +// Import commands.js using ES2015 syntax:
 +import './commands'
 +
-+// Alternatively you can use CommonJS syntax:
-+// require('./commands')
-+
 +// Ensure global app styles are loaded:
 +import '../../src/main.css'
-diff --git a/vue-cli-2/src/App.spec.ct.js b/vue-cli-2/src/App.spec.ct.js
+\ No newline at end of file
+diff --git a/setup-vue-cli-3/src/App.cy.js b/setup-vue-cli-3/src/App.cy.js
 new file mode 100644
 index 0000000..4a912ba
 --- /dev/null
-+++ b/vue-cli-2/src/App.spec.ct.js
++++ b/setup-vue-cli-3/src/App.cy.js
 @@ -0,0 +1,11 @@
 +import { mount } from '@cypress/vue'
 +import App from './App.vue'
@@ -116,11 +108,11 @@ index 0000000..4a912ba
 +  cy.get('[data-test=count]').should("have.text", "Total clicks: 1")
 +  cy.get('button').click()
 +})
-diff --git a/vue-cli-2/src/components/HelloWorld.spec.ct.js b/vue-cli-2/src/components/HelloWorld.spec.ct.js
+diff --git a/setup-vue-cli-3/src/components/HelloWorld.cy.js b/setup-vue-cli-3/src/components/HelloWorld.cy.js
 new file mode 100644
 index 0000000..bbbb6c3
 --- /dev/null
-+++ b/vue-cli-2/src/components/HelloWorld.spec.ct.js
++++ b/setup-vue-cli-3/src/components/HelloWorld.cy.js
 @@ -0,0 +1,11 @@
 +import { mount } from '@cypress/vue'
 +import HelloWorld from './HelloWorld.vue'
@@ -188,11 +180,11 @@ index 0000000..5eb6269
 +}
 +</script>
 \ No newline at end of file
-diff --git a/vue-cli-3/src/components/Counter.spec.ct.js b/vue-cli-3/src/components/Counter.spec.ct.js
+diff --git a/vue-cli-3/src/components/Counter.cy.js b/vue-cli-3/src/components/Counter.cy.js
 new file mode 100644
 index 0000000..afd7e21
 --- /dev/null
-+++ b/vue-cli-3/src/components/Counter.spec.ct.js
++++ b/vue-cli-3/src/components/Counter.cy.js
 @@ -0,0 +1,10 @@
 +import { mount } from '@cypress/vue'
 +import Counter from './Counter.vue'
@@ -204,11 +196,11 @@ index 0000000..afd7e21
 +  cy.get('button').click()
 +  cy.get('[data-test=count]').should("have.text", "Total clicks: 2")
 +})
-diff --git a/vue-cli-3/src/components/CounterCompositionApi.spec.ct.js b/vue-cli-3/src/components/CounterCompositionApi.spec.ct.js
+diff --git a/vue-cli-3/src/components/CounterCompositionApi.cy.js b/vue-cli-3/src/components/CounterCompositionApi.cy.js
 new file mode 100644
 index 0000000..afd7e21
 --- /dev/null
-+++ b/vue-cli-3/src/components/CounterCompositionApi.spec.ct.js
++++ b/vue-cli-3/src/components/CounterCompositionApi.cy.js
 @@ -0,0 +1,10 @@
 +import { mount } from '@cypress/vue'
 +import CounterCompositionApi from './CounterCompositionApi.vue'
diff --git a/scripts/setup-vue-cli-3/3.patch b/scripts/setup-vue-cli-3/3.patch
new file mode 100644
index 0000000..eec9fd2
--- /dev/null
+++ b/scripts/setup-vue-cli-3/3.patch
@@ -0,0 +1,94 @@
+diff --git a/setup-vue-cli-3/.gitignore b/setup-vue-cli-3/.gitignore
+index 403adbc..f6061b7 100644
+--- a/setup-vue-cli-3/.gitignore
++++ b/setup-vue-cli-3/.gitignore
+@@ -2,6 +2,8 @@
+ node_modules
+ /dist
+ 
++.nyc_output
++coverage
+ 
+ # local env files
+ .env.local
+diff --git a/setup-vue-cli-3/.nycrc b/setup-vue-cli-3/.nycrc
+new file mode 100644
+index 0000000..3a40283
+--- /dev/null
++++ b/setup-vue-cli-3/.nycrc
+@@ -0,0 +1,13 @@
++{
++  "include": [
++    "src/**/*.{js,vue}"
++  ],
++  "exclude": [
++    "src/**/*.spec.ct.js"
++  ],
++  "extension": [
++    ".js",
++    ".vue"
++  ],
++  "all": true
++}
+\ No newline at end of file
+diff --git a/setup-vue-cli-3/babel.config.js b/setup-vue-cli-3/babel.config.js
+index e955840..9f7fe23 100644
+--- a/setup-vue-cli-3/babel.config.js
++++ b/setup-vue-cli-3/babel.config.js
+@@ -1,5 +1,12 @@
++const plugins = []
++
++if (process.env.CYPRESS) {
++  plugins.push('istanbul')
++}
++
+ module.exports = {
+   presets: [
+     '@vue/cli-plugin-babel/preset'
+-  ]
+-}
++  ],
++  plugins
++}
+\ No newline at end of file
+diff --git a/setup-vue-cli-3/cypress.config.js b/setup-vue-cli-3/cypress.config.js
+index eabdc78..6c3dd60 100644
+--- a/setup-vue-cli-3/cypress.config.js
++++ b/setup-vue-cli-3/cypress.config.js
+@@ -1,11 +1,20 @@
+ const { defineConfig } = require('cypress')
+ const { devServer } = require('@cypress/webpack-dev-server')
+ const webpackConfig = require('@vue/cli-service/webpack.config')
++const codeCoverageTask = require("@cypress/code-coverage/task")
+
+ module.exports = defineConfig({
++  coverage: true,
++  codeCoverage: {
++    exclude: "cypress/**/*.*",
++  },
+   // Component testing, JavaScript, Vue CLI, Webpack
+   component: {
+     devServer,
+-    devServerConfig: { webpackConfig }
++    devServerConfig: { webpackConfig },
++    setupNodeEvents(on, config) {
++      codeCoverageTask(on, config);
++      return config;
++    },
+   },
+ })
+\ No newline at end of file
+diff --git a/setup-vue-cli-3/cypress/support/component.js b/setup-vue-cli-3/cypress/support/component.js
+index 7e654cd..a5eff01 100644
+--- a/setup-vue-cli-3/cypress/support/component.js
++++ b/setup-vue-cli-3/cypress/support/component.js
+@@ -2,4 +2,6 @@
+ import './commands'
+
+ // Ensure global app styles are loaded:
+-import '../../src/main.css'
+\ No newline at end of file
++import '../../src/main.css'
++
++import '@cypress/code-coverage/support'
+\ No newline at end of file
diff --git a/scripts/vue-cli-3/pr.md b/scripts/setup-vue-cli-3/pr.md
similarity index 70%
rename from scripts/vue-cli-3/pr.md
rename to scripts/setup-vue-cli-3/pr.md
index 218b7a0..f8dc9ad 100644
--- a/scripts/vue-cli-3/pr.md
+++ b/scripts/setup-vue-cli-3/pr.md
@@ -8,13 +8,13 @@
    3. ${COMMIT_1}
 3. Add Cypress component testing support with sample tests
    1. ${COMMAND_2}
-   2. Add [cypress.json](cypress.json)
-   3. Add [cypress/plugins/index.js](cypress/plugins/index.js)
+   2. Add [cypress.config.js](cypress.config.js)
+   3. Add [cypress/component/index.html](cypress/component/index.html)
    1. Update [src/App.vue](src/App.vue) to reference new [src/components/Counter.vue](src/components/Counter.vue) component
-   1. Add [src/App.spec.ct.js](src/App.spec.ct.js), [src/components/HelloWorld.spec.ct.js](src/components/HelloWorld.spec.ct.js), [src/components/Counter.spec.ct.js](src/components/Counter.spec.ct.js) spec files
-   5. Add [src/CounterCompositionApi.vue](src/components/CounterCompositionApi.vue), a Composition API component with tests in [src/components/CounterCompositionApi.spec.ct.js](src/components/CounterCompositionApi.spec.ct.js)
-   6. `npx cypress open-ct` (Notice that the fonts don't inherit global app styles)
-   7. Edit [cypress/support/index.js](cypress/support/index.js) to import global app styles, the Cypress test preview should update automatically
+   1. Add [src/App.cy.js](src/App.cy.js), [src/components/HelloWorld.cy.js](src/components/HelloWorld.cy.js), [src/components/Counter.cy.js](src/components/Counter.cy.js) spec files
+   5. Add [src/CounterCompositionApi.vue](src/components/CounterCompositionApi.vue), a Composition API component with tests in [src/components/CounterCompositionApi.cy.js](src/components/CounterCompositionApi.cy.js)
+   6. `npx cypress open` (Notice that the fonts don't inherit global app styles)
+   7. Edit [cypress/support/component.js](cypress/support/component.js) to import global app styles, the Cypress test preview should update automatically
    8. ${COMMIT_2}
 4. Add Cypress Code Coverage
    1. ${COMMAND_3}
diff --git a/scripts/vue-cli-2/3.patch b/scripts/vue-cli-2/3.patch
deleted file mode 100644
index 1793961..0000000
--- a/scripts/vue-cli-2/3.patch
+++ /dev/null
@@ -1,94 +0,0 @@
-diff --git a/vue-cli-2/.gitignore b/vue-cli-2/.gitignore
-index 403adbc..372a13f 100644
---- a/vue-cli-2/.gitignore
-+++ b/vue-cli-2/.gitignore
-@@ -21,3 +21,6 @@ pnpm-debug.log*
- *.njsproj
- *.sln
- *.sw?
-+
-+.nyc_output
-+coverage
-diff --git a/vue-cli-2/.nycrc b/vue-cli-2/.nycrc
-new file mode 100644
-index 0000000..3a40283
---- /dev/null
-+++ b/vue-cli-2/.nycrc
-@@ -0,0 +1,13 @@
-+{
-+  "include": [
-+    "src/**/*.{js,vue}"
-+  ],
-+  "exclude": [
-+    "src/**/*.spec.ct.js"
-+  ],
-+  "extension": [
-+    ".js",
-+    ".vue"
-+  ],
-+  "all": true
-+}
-\ No newline at end of file
-diff --git a/vue-cli-2/babel.config.js b/vue-cli-2/babel.config.js
-index e955840..f4b8fdb 100644
---- a/vue-cli-2/babel.config.js
-+++ b/vue-cli-2/babel.config.js
-@@ -1,5 +1,12 @@
--module.exports = {
--  presets: [
--    '@vue/cli-plugin-babel/preset'
--  ]
-+const plugins = []
-+
-+if (process.env.CYPRESS) {
-+  plugins.push('istanbul')
- }
-+
-+module.exports = {
-+   presets: [
-+     '@vue/cli-plugin-babel/preset'
-+  ],
-+  plugins
-+}
-\ No newline at end of file
-diff --git a/vue-cli-2/cypress.json b/vue-cli-2/cypress.json
-index ee59bec..622829d 100644
---- a/vue-cli-2/cypress.json
-+++ b/vue-cli-2/cypress.json
-@@ -1,4 +1,5 @@
- {
-+  "coverage": true,
-   "component": {
-     "testFiles": "**/*.spec.ct.{js,ts,jsx,tsx}",
-     "componentFolder": "src"
-diff --git a/vue-cli-2/cypress/plugins/index.js b/vue-cli-2/cypress/plugins/index.js
-index 3590bd9..9fa1b7a 100644
---- a/vue-cli-2/cypress/plugins/index.js
-+++ b/vue-cli-2/cypress/plugins/index.js
-@@ -1,5 +1,6 @@
- const { startDevServer } = require('@cypress/webpack-dev-server')
- const webpackConfig = require('@vue/cli-service/webpack.config')
-+const codeCoverageTask = require('@cypress/code-coverage/task')
- 
- module.exports = (on, config) => {
-   on('dev-server:start', (options) => {
-@@ -8,5 +9,6 @@ module.exports = (on, config) => {
-       webpackConfig,
-     })
-   })
-+  codeCoverageTask(on, config)
-   return config
- }
-diff --git a/vue-cli-2/cypress/support/index.js b/vue-cli-2/cypress/support/index.js
-index 9b7843f..05cf3eb 100644
---- a/vue-cli-2/cypress/support/index.js
-+++ b/vue-cli-2/cypress/support/index.js
-@@ -13,6 +13,8 @@
- // https://on.cypress.io/configuration
- // ***********************************************************
- 
-+import '@cypress/code-coverage/support'
-+
- // Import commands.js using ES2015 syntax:
- import './commands'
- 
diff --git a/scripts/vue-cli-3/3.patch b/scripts/vue-cli-3/3.patch
deleted file mode 100644
index 49c6c5c..0000000
--- a/scripts/vue-cli-3/3.patch
+++ /dev/null
@@ -1,94 +0,0 @@
-diff --git a/vue-cli-3/.gitignore b/vue-cli-3/.gitignore
-index 403adbc..f6061b7 100644
---- a/vue-cli-3/.gitignore
-+++ b/vue-cli-3/.gitignore
-@@ -2,6 +2,8 @@
- node_modules
- /dist
- 
-+.nyc_output
-+coverage
- 
- # local env files
- .env.local
-diff --git a/vue-cli-3/.nycrc b/vue-cli-3/.nycrc
-new file mode 100644
-index 0000000..3a40283
---- /dev/null
-+++ b/vue-cli-3/.nycrc
-@@ -0,0 +1,13 @@
-+{
-+  "include": [
-+    "src/**/*.{js,vue}"
-+  ],
-+  "exclude": [
-+    "src/**/*.spec.ct.js"
-+  ],
-+  "extension": [
-+    ".js",
-+    ".vue"
-+  ],
-+  "all": true
-+}
-\ No newline at end of file
-diff --git a/vue-cli-3/babel.config.js b/vue-cli-3/babel.config.js
-index e955840..9f7fe23 100644
---- a/vue-cli-3/babel.config.js
-+++ b/vue-cli-3/babel.config.js
-@@ -1,5 +1,12 @@
-+const plugins = []
-+
-+if (process.env.CYPRESS) {
-+  plugins.push('istanbul')
-+}
-+
- module.exports = {
-   presets: [
-     '@vue/cli-plugin-babel/preset'
--  ]
--}
-+  ],
-+  plugins
-+}
-\ No newline at end of file
-diff --git a/vue-cli-3/cypress.json b/vue-cli-3/cypress.json
-index ee59bec..622829d 100644
---- a/vue-cli-3/cypress.json
-+++ b/vue-cli-3/cypress.json
-@@ -1,4 +1,5 @@
- {
-+  "coverage": true,
-   "component": {
-     "testFiles": "**/*.spec.ct.{js,ts,jsx,tsx}",
-     "componentFolder": "src"
-diff --git a/vue-cli-3/cypress/plugins/index.js b/vue-cli-3/cypress/plugins/index.js
-index 3590bd9..1f08a26 100644
---- a/vue-cli-3/cypress/plugins/index.js
-+++ b/vue-cli-3/cypress/plugins/index.js
-@@ -1,5 +1,6 @@
- const { startDevServer } = require('@cypress/webpack-dev-server')
- const webpackConfig = require('@vue/cli-service/webpack.config')
-+const codeCoverageTask = require('@cypress/code-coverage/task')
- 
- module.exports = (on, config) => {
-   on('dev-server:start', (options) => {
-@@ -8,5 +9,7 @@ module.exports = (on, config) => {
-       webpackConfig,
-     })
-   })
-+
-+  codeCoverageTask(on, config)
-   return config
- }
-diff --git a/vue-cli-3/cypress/support/index.js b/vue-cli-3/cypress/support/index.js
-index 9b7843f..05cf3eb 100644
---- a/vue-cli-3/cypress/support/index.js
-+++ b/vue-cli-3/cypress/support/index.js
-@@ -13,6 +13,8 @@
- // https://on.cypress.io/configuration
- // ***********************************************************
- 
-+import '@cypress/code-coverage/support'
-+
- // Import commands.js using ES2015 syntax:
- import './commands'