From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Wed, 11 Aug 2021 07:27:57 +0000 (+0800)
Subject: chore: regenerate all templates with new feature flags
X-Git-Tag: v3.0.0-alpha.2~9
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7fb086362ff047bb3e717812fe8c97071900e03a;p=thirdparty%2Fvuejs%2Fcreate-vue.git

chore: regenerate all templates with new feature flags
---

diff --git a/index.js b/index.js
index 1b28f39e..dd5a285e 100755
--- a/index.js
+++ b/index.js
@@ -8,7 +8,6 @@ import minimist from 'minimist'
 import prompts from 'prompts'
 import { red, green, bold } from 'kolorist'
 
-import templateList from './utils/templateList.js'
 import renderTemplate from './utils/renderTemplate.js'
 import {
   postOrderDirectoryTraverse,
@@ -45,6 +44,7 @@ function emptyDir(dir) {
 async function init() {
   const cwd = process.cwd()
   // possible options:
+  // --default
   // --typescript / --ts
   // --jsx
   // --router / --vue-router
@@ -62,7 +62,7 @@ async function init() {
 
   // if any of the feature flags is set, we would skip the feature prompts
   // use `??` instead of `||` once we drop Node.js 12 support 
-  const isFeatureFlagsUsed = typeof (argv.ts || argv.jsx || argv.router || argv.vuex || argv.tests) === 'boolean'
+  const isFeatureFlagsUsed = typeof (argv.default || argv.ts || argv.jsx || argv.router || argv.vuex || argv.tests) === 'boolean'
 
   let targetDir = argv._[0]
   const defaultProjectName = !targetDir ? 'vue-project' : targetDir
diff --git a/playground/default-ts-with-tests/README.md b/playground/default-ts-with-tests/README.md
deleted file mode 100644
index e69de29b..00000000
diff --git a/playground/default-ts-with-tests/src/vite-env.d.ts b/playground/default-ts-with-tests/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe2..00000000
--- a/playground/default-ts-with-tests/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/playground/default-ts/README.md b/playground/default-ts/README.md
deleted file mode 100644
index e69de29b..00000000
diff --git a/playground/default-ts/src/vite-env.d.ts b/playground/default-ts/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe2..00000000
--- a/playground/default-ts/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/playground/default-with-tests/README.md b/playground/default-with-tests/README.md
deleted file mode 100644
index e69de29b..00000000
diff --git a/playground/default-with-tests/src/vite-env.d.ts b/playground/default-with-tests/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe2..00000000
--- a/playground/default-with-tests/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/playground/default/README.md b/playground/default/README.md
index e69de29b..c3a42c19 100644
--- a/playground/default/README.md
+++ b/playground/default/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/default/jsconfig.json b/playground/default/jsconfig.json
index 9c2cfe6b..6f98acfa 100644
--- a/playground/default/jsconfig.json
+++ b/playground/default/jsconfig.json
@@ -16,6 +16,6 @@
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
     "skipLibCheck": true
   },
-  "include": ["vite.config.*", "src/**/*", "src/**/*.vue"],
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/**"]
 }
diff --git a/playground/default/package.json b/playground/default/package.json
index b9abc773..cdc46acb 100644
--- a/playground/default/package.json
+++ b/playground/default/package.json
@@ -12,7 +12,6 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.2.5",
-    "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.1.5",
     "vite": "^2.4.3"
   }
diff --git a/playground/default/src/vite-env.d.ts b/playground/default/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe2..00000000
--- a/playground/default/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/playground/default-with-tests/src/shims-vue.d.ts b/playground/default/vite-env.d.ts
similarity index 81%
rename from playground/default-with-tests/src/shims-vue.d.ts
rename to playground/default/vite-env.d.ts
index ec4f1b2e..636d9c3f 100644
--- a/playground/default-with-tests/src/shims-vue.d.ts
+++ b/playground/default/vite-env.d.ts
@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 declare module '*.vue' {
   import { DefineComponent } from 'vue'
   // eslint-disable-next-line
diff --git a/playground/default/vite.config.js b/playground/default/vite.config.js
index 032e163c..24c2e504 100644
--- a/playground/default/vite.config.js
+++ b/playground/default/vite.config.js
@@ -1,10 +1,9 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueJsx()],
+  plugins: [vue()],
   resolve: {
     alias: {
       '@/': new URL('./src/', import.meta.url).pathname
diff --git a/playground/default-ts-with-tests/.gitignore b/playground/jsx-router-vuex-with-tests/.gitignore
similarity index 100%
rename from playground/default-ts-with-tests/.gitignore
rename to playground/jsx-router-vuex-with-tests/.gitignore
diff --git a/playground/jsx-router-vuex-with-tests/README.md b/playground/jsx-router-vuex-with-tests/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/jsx-router-vuex-with-tests/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/default-ts-with-tests/cypress.json b/playground/jsx-router-vuex-with-tests/cypress.json
similarity index 100%
rename from playground/default-ts-with-tests/cypress.json
rename to playground/jsx-router-vuex-with-tests/cypress.json
diff --git a/playground/default-ts-with-tests/cypress/fixtures/example.json b/playground/jsx-router-vuex-with-tests/cypress/fixtures/example.json
similarity index 100%
rename from playground/default-ts-with-tests/cypress/fixtures/example.json
rename to playground/jsx-router-vuex-with-tests/cypress/fixtures/example.json
diff --git a/playground/spa-with-tests/cypress/integration/example.spec.js b/playground/jsx-router-vuex-with-tests/cypress/integration/example.spec.js
similarity index 100%
rename from playground/spa-with-tests/cypress/integration/example.spec.js
rename to playground/jsx-router-vuex-with-tests/cypress/integration/example.spec.js
diff --git a/playground/default-with-tests/cypress/jsconfig.json b/playground/jsx-router-vuex-with-tests/cypress/jsconfig.json
similarity index 100%
rename from playground/default-with-tests/cypress/jsconfig.json
rename to playground/jsx-router-vuex-with-tests/cypress/jsconfig.json
diff --git a/playground/default-with-tests/cypress/plugins/index.js b/playground/jsx-router-vuex-with-tests/cypress/plugins/index.js
similarity index 100%
rename from playground/default-with-tests/cypress/plugins/index.js
rename to playground/jsx-router-vuex-with-tests/cypress/plugins/index.js
diff --git a/playground/default-with-tests/cypress/support/commands.js b/playground/jsx-router-vuex-with-tests/cypress/support/commands.js
similarity index 100%
rename from playground/default-with-tests/cypress/support/commands.js
rename to playground/jsx-router-vuex-with-tests/cypress/support/commands.js
diff --git a/playground/default-with-tests/cypress/support/index.js b/playground/jsx-router-vuex-with-tests/cypress/support/index.js
similarity index 100%
rename from playground/default-with-tests/cypress/support/index.js
rename to playground/jsx-router-vuex-with-tests/cypress/support/index.js
diff --git a/playground/default-ts-with-tests/index.html b/playground/jsx-router-vuex-with-tests/index.html
similarity index 100%
rename from playground/default-ts-with-tests/index.html
rename to playground/jsx-router-vuex-with-tests/index.html
diff --git a/playground/spa-with-tests/jsconfig.json b/playground/jsx-router-vuex-with-tests/jsconfig.json
similarity index 85%
rename from playground/spa-with-tests/jsconfig.json
rename to playground/jsx-router-vuex-with-tests/jsconfig.json
index 9c2cfe6b..6f98acfa 100644
--- a/playground/spa-with-tests/jsconfig.json
+++ b/playground/jsx-router-vuex-with-tests/jsconfig.json
@@ -16,6 +16,6 @@
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
     "skipLibCheck": true
   },
-  "include": ["vite.config.*", "src/**/*", "src/**/*.vue"],
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/**"]
 }
diff --git a/playground/spa-with-tests/package.json b/playground/jsx-router-vuex-with-tests/package.json
similarity index 95%
rename from playground/spa-with-tests/package.json
rename to playground/jsx-router-vuex-with-tests/package.json
index 49c07602..3400d2a6 100644
--- a/playground/spa-with-tests/package.json
+++ b/playground/jsx-router-vuex-with-tests/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "spa-with-tests",
+  "name": "jsx-router-vuex-with-tests",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
@@ -18,9 +18,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.2.5",
-    "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.1.5",
     "vite": "^2.4.3",
+    "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@cypress/vite-dev-server": "^2.0.2",
     "@cypress/vue": "^3.0.1",
     "cypress": "^8.0.0",
diff --git a/playground/default-ts-with-tests/public/favicon.ico b/playground/jsx-router-vuex-with-tests/public/favicon.ico
similarity index 100%
rename from playground/default-ts-with-tests/public/favicon.ico
rename to playground/jsx-router-vuex-with-tests/public/favicon.ico
diff --git a/playground/spa-ts-with-tests/src/App.vue b/playground/jsx-router-vuex-with-tests/src/App.vue
similarity index 100%
rename from playground/spa-ts-with-tests/src/App.vue
rename to playground/jsx-router-vuex-with-tests/src/App.vue
diff --git a/playground/default-ts-with-tests/src/assets/logo.png b/playground/jsx-router-vuex-with-tests/src/assets/logo.png
similarity index 100%
rename from playground/default-ts-with-tests/src/assets/logo.png
rename to playground/jsx-router-vuex-with-tests/src/assets/logo.png
diff --git a/playground/spa-with-tests/src/components/HelloWorld.vue b/playground/jsx-router-vuex-with-tests/src/components/HelloWorld.vue
similarity index 100%
rename from playground/spa-with-tests/src/components/HelloWorld.vue
rename to playground/jsx-router-vuex-with-tests/src/components/HelloWorld.vue
diff --git a/playground/default-with-tests/src/components/__tests__/HelloWorld.spec.js b/playground/jsx-router-vuex-with-tests/src/components/__tests__/HelloWorld.spec.js
similarity index 100%
rename from playground/default-with-tests/src/components/__tests__/HelloWorld.spec.js
rename to playground/jsx-router-vuex-with-tests/src/components/__tests__/HelloWorld.spec.js
diff --git a/playground/spa-with-tests/src/main.js b/playground/jsx-router-vuex-with-tests/src/main.js
similarity index 100%
rename from playground/spa-with-tests/src/main.js
rename to playground/jsx-router-vuex-with-tests/src/main.js
diff --git a/playground/spa-with-tests/src/router/index.js b/playground/jsx-router-vuex-with-tests/src/router/index.js
similarity index 100%
rename from playground/spa-with-tests/src/router/index.js
rename to playground/jsx-router-vuex-with-tests/src/router/index.js
diff --git a/playground/spa-with-tests/src/store/index.js b/playground/jsx-router-vuex-with-tests/src/store/index.js
similarity index 100%
rename from playground/spa-with-tests/src/store/index.js
rename to playground/jsx-router-vuex-with-tests/src/store/index.js
diff --git a/playground/spa-ts-with-tests/src/views/About.vue b/playground/jsx-router-vuex-with-tests/src/views/About.vue
similarity index 100%
rename from playground/spa-ts-with-tests/src/views/About.vue
rename to playground/jsx-router-vuex-with-tests/src/views/About.vue
diff --git a/playground/spa-with-tests/src/views/Home.vue b/playground/jsx-router-vuex-with-tests/src/views/Home.vue
similarity index 100%
rename from playground/spa-with-tests/src/views/Home.vue
rename to playground/jsx-router-vuex-with-tests/src/views/Home.vue
diff --git a/playground/default/src/shims-vue.d.ts b/playground/jsx-router-vuex-with-tests/vite-env.d.ts
similarity index 81%
rename from playground/default/src/shims-vue.d.ts
rename to playground/jsx-router-vuex-with-tests/vite-env.d.ts
index ec4f1b2e..636d9c3f 100644
--- a/playground/default/src/shims-vue.d.ts
+++ b/playground/jsx-router-vuex-with-tests/vite-env.d.ts
@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 declare module '*.vue' {
   import { DefineComponent } from 'vue'
   // eslint-disable-next-line
diff --git a/playground/default-with-tests/vite.config.js b/playground/jsx-router-vuex-with-tests/vite.config.js
similarity index 100%
rename from playground/default-with-tests/vite.config.js
rename to playground/jsx-router-vuex-with-tests/vite.config.js
diff --git a/playground/default-ts/.gitignore b/playground/jsx-router-vuex/.gitignore
similarity index 100%
rename from playground/default-ts/.gitignore
rename to playground/jsx-router-vuex/.gitignore
diff --git a/playground/jsx-router-vuex/README.md b/playground/jsx-router-vuex/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/jsx-router-vuex/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/default-ts/index.html b/playground/jsx-router-vuex/index.html
similarity index 100%
rename from playground/default-ts/index.html
rename to playground/jsx-router-vuex/index.html
diff --git a/playground/spa/jsconfig.json b/playground/jsx-router-vuex/jsconfig.json
similarity index 85%
rename from playground/spa/jsconfig.json
rename to playground/jsx-router-vuex/jsconfig.json
index 9c2cfe6b..6f98acfa 100644
--- a/playground/spa/jsconfig.json
+++ b/playground/jsx-router-vuex/jsconfig.json
@@ -16,6 +16,6 @@
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
     "skipLibCheck": true
   },
-  "include": ["vite.config.*", "src/**/*", "src/**/*.vue"],
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/**"]
 }
diff --git a/playground/jsx-router-vuex/package.json b/playground/jsx-router-vuex/package.json
new file mode 100644
index 00000000..3466fc62
--- /dev/null
+++ b/playground/jsx-router-vuex/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "jsx-router-vuex",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preserve": "vite build",
+    "serve": "vite preview --port 5050"
+  },
+  "dependencies": {
+    "vue": "^3.1.5",
+    "vue-router": "^4.0.10",
+    "vuex": "^4.0.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.2.5",
+    "@vue/compiler-sfc": "^3.1.5",
+    "vite": "^2.4.3",
+    "@vitejs/plugin-vue-jsx": "^1.1.6"
+  }
+}
diff --git a/playground/default-ts/public/favicon.ico b/playground/jsx-router-vuex/public/favicon.ico
similarity index 100%
rename from playground/default-ts/public/favicon.ico
rename to playground/jsx-router-vuex/public/favicon.ico
diff --git a/playground/spa-ts/src/App.vue b/playground/jsx-router-vuex/src/App.vue
similarity index 100%
rename from playground/spa-ts/src/App.vue
rename to playground/jsx-router-vuex/src/App.vue
diff --git a/playground/default-ts/src/assets/logo.png b/playground/jsx-router-vuex/src/assets/logo.png
similarity index 100%
rename from playground/default-ts/src/assets/logo.png
rename to playground/jsx-router-vuex/src/assets/logo.png
diff --git a/playground/spa/src/components/HelloWorld.vue b/playground/jsx-router-vuex/src/components/HelloWorld.vue
similarity index 100%
rename from playground/spa/src/components/HelloWorld.vue
rename to playground/jsx-router-vuex/src/components/HelloWorld.vue
diff --git a/playground/spa/src/main.js b/playground/jsx-router-vuex/src/main.js
similarity index 100%
rename from playground/spa/src/main.js
rename to playground/jsx-router-vuex/src/main.js
diff --git a/playground/spa/src/router/index.js b/playground/jsx-router-vuex/src/router/index.js
similarity index 100%
rename from playground/spa/src/router/index.js
rename to playground/jsx-router-vuex/src/router/index.js
diff --git a/playground/spa/src/store/index.js b/playground/jsx-router-vuex/src/store/index.js
similarity index 100%
rename from playground/spa/src/store/index.js
rename to playground/jsx-router-vuex/src/store/index.js
diff --git a/playground/spa-ts/src/views/About.vue b/playground/jsx-router-vuex/src/views/About.vue
similarity index 100%
rename from playground/spa-ts/src/views/About.vue
rename to playground/jsx-router-vuex/src/views/About.vue
diff --git a/playground/spa/src/views/Home.vue b/playground/jsx-router-vuex/src/views/Home.vue
similarity index 100%
rename from playground/spa/src/views/Home.vue
rename to playground/jsx-router-vuex/src/views/Home.vue
diff --git a/playground/default-ts/src/shims-vue.d.ts b/playground/jsx-router-vuex/vite-env.d.ts
similarity index 81%
rename from playground/default-ts/src/shims-vue.d.ts
rename to playground/jsx-router-vuex/vite-env.d.ts
index ec4f1b2e..636d9c3f 100644
--- a/playground/default-ts/src/shims-vue.d.ts
+++ b/playground/jsx-router-vuex/vite-env.d.ts
@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 declare module '*.vue' {
   import { DefineComponent } from 'vue'
   // eslint-disable-next-line
diff --git a/playground/spa-with-tests/vite.config.js b/playground/jsx-router-vuex/vite.config.js
similarity index 100%
rename from playground/spa-with-tests/vite.config.js
rename to playground/jsx-router-vuex/vite.config.js
diff --git a/playground/default-with-tests/.gitignore b/playground/jsx-router/.gitignore
similarity index 100%
rename from playground/default-with-tests/.gitignore
rename to playground/jsx-router/.gitignore
diff --git a/playground/jsx-router/README.md b/playground/jsx-router/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/jsx-router/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/default-with-tests/index.html b/playground/jsx-router/index.html
similarity index 100%
rename from playground/default-with-tests/index.html
rename to playground/jsx-router/index.html
diff --git a/playground/default-with-tests/jsconfig.json b/playground/jsx-router/jsconfig.json
similarity index 85%
rename from playground/default-with-tests/jsconfig.json
rename to playground/jsx-router/jsconfig.json
index 9c2cfe6b..6f98acfa 100644
--- a/playground/default-with-tests/jsconfig.json
+++ b/playground/jsx-router/jsconfig.json
@@ -16,6 +16,6 @@
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
     "skipLibCheck": true
   },
-  "include": ["vite.config.*", "src/**/*", "src/**/*.vue"],
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/**"]
 }
diff --git a/playground/jsx-router/package.json b/playground/jsx-router/package.json
new file mode 100644
index 00000000..143545f1
--- /dev/null
+++ b/playground/jsx-router/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "jsx-router",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preserve": "vite build",
+    "serve": "vite preview --port 5050"
+  },
+  "dependencies": {
+    "vue": "^3.1.5",
+    "vue-router": "^4.0.10"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.2.5",
+    "@vue/compiler-sfc": "^3.1.5",
+    "vite": "^2.4.3",
+    "@vitejs/plugin-vue-jsx": "^1.1.6"
+  }
+}
diff --git a/playground/default-with-tests/public/favicon.ico b/playground/jsx-router/public/favicon.ico
similarity index 100%
rename from playground/default-with-tests/public/favicon.ico
rename to playground/jsx-router/public/favicon.ico
diff --git a/playground/spa-with-tests/src/App.vue b/playground/jsx-router/src/App.vue
similarity index 100%
rename from playground/spa-with-tests/src/App.vue
rename to playground/jsx-router/src/App.vue
diff --git a/playground/default-with-tests/src/assets/logo.png b/playground/jsx-router/src/assets/logo.png
similarity index 100%
rename from playground/default-with-tests/src/assets/logo.png
rename to playground/jsx-router/src/assets/logo.png
diff --git a/playground/jsx-router/src/components/HelloWorld.vue b/playground/jsx-router/src/components/HelloWorld.vue
new file mode 100644
index 00000000..51f81a8f
--- /dev/null
+++ b/playground/jsx-router/src/components/HelloWorld.vue
@@ -0,0 +1,57 @@
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Docs
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>
diff --git a/playground/jsx-router/src/main.js b/playground/jsx-router/src/main.js
new file mode 100644
index 00000000..c8e37b03
--- /dev/null
+++ b/playground/jsx-router/src/main.js
@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')
diff --git a/playground/jsx-router/src/router/index.js b/playground/jsx-router/src/router/index.js
new file mode 100644
index 00000000..26bf8e7e
--- /dev/null
+++ b/playground/jsx-router/src/router/index.js
@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (About.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import('../views/About.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+export default router
diff --git a/playground/spa-with-tests/src/views/About.vue b/playground/jsx-router/src/views/About.vue
similarity index 100%
rename from playground/spa-with-tests/src/views/About.vue
rename to playground/jsx-router/src/views/About.vue
diff --git a/playground/jsx-router/src/views/Home.vue b/playground/jsx-router/src/views/Home.vue
new file mode 100644
index 00000000..d74dda2c
--- /dev/null
+++ b/playground/jsx-router/src/views/Home.vue
@@ -0,0 +1,19 @@
+<template>
+  <img alt="Vue logo" src="@/assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<script setup>
+import HelloWorld from '@/components/HelloWorld.vue'
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/playground/default-ts-with-tests/src/shims-vue.d.ts b/playground/jsx-router/vite-env.d.ts
similarity index 81%
rename from playground/default-ts-with-tests/src/shims-vue.d.ts
rename to playground/jsx-router/vite-env.d.ts
index ec4f1b2e..636d9c3f 100644
--- a/playground/default-ts-with-tests/src/shims-vue.d.ts
+++ b/playground/jsx-router/vite-env.d.ts
@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 declare module '*.vue' {
   import { DefineComponent } from 'vue'
   // eslint-disable-next-line
diff --git a/playground/spa/vite.config.js b/playground/jsx-router/vite.config.js
similarity index 100%
rename from playground/spa/vite.config.js
rename to playground/jsx-router/vite.config.js
diff --git a/playground/spa-ts-with-tests/.gitignore b/playground/jsx/.gitignore
similarity index 100%
rename from playground/spa-ts-with-tests/.gitignore
rename to playground/jsx/.gitignore
diff --git a/playground/jsx/README.md b/playground/jsx/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/jsx/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/spa-ts-with-tests/index.html b/playground/jsx/index.html
similarity index 100%
rename from playground/spa-ts-with-tests/index.html
rename to playground/jsx/index.html
diff --git a/playground/jsx/jsconfig.json b/playground/jsx/jsconfig.json
new file mode 100644
index 00000000..6f98acfa
--- /dev/null
+++ b/playground/jsx/jsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/**"]
+}
diff --git a/playground/jsx/package.json b/playground/jsx/package.json
new file mode 100644
index 00000000..8e823726
--- /dev/null
+++ b/playground/jsx/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "jsx",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preserve": "vite build",
+    "serve": "vite preview --port 5050"
+  },
+  "dependencies": {
+    "vue": "^3.1.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.2.5",
+    "@vue/compiler-sfc": "^3.1.5",
+    "vite": "^2.4.3",
+    "@vitejs/plugin-vue-jsx": "^1.1.6"
+  }
+}
diff --git a/playground/spa-ts-with-tests/public/favicon.ico b/playground/jsx/public/favicon.ico
similarity index 100%
rename from playground/spa-ts-with-tests/public/favicon.ico
rename to playground/jsx/public/favicon.ico
diff --git a/playground/default-with-tests/src/App.vue b/playground/jsx/src/App.vue
similarity index 100%
rename from playground/default-with-tests/src/App.vue
rename to playground/jsx/src/App.vue
diff --git a/playground/spa-ts-with-tests/src/assets/logo.png b/playground/jsx/src/assets/logo.png
similarity index 100%
rename from playground/spa-ts-with-tests/src/assets/logo.png
rename to playground/jsx/src/assets/logo.png
diff --git a/playground/default-with-tests/src/components/HelloWorld.vue b/playground/jsx/src/components/HelloWorld.vue
similarity index 100%
rename from playground/default-with-tests/src/components/HelloWorld.vue
rename to playground/jsx/src/components/HelloWorld.vue
diff --git a/playground/default-with-tests/src/main.js b/playground/jsx/src/main.js
similarity index 100%
rename from playground/default-with-tests/src/main.js
rename to playground/jsx/src/main.js
diff --git a/playground/jsx/vite-env.d.ts b/playground/jsx/vite-env.d.ts
new file mode 100644
index 00000000..636d9c3f
--- /dev/null
+++ b/playground/jsx/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/playground/default-ts-with-tests/vite.config.ts b/playground/jsx/vite.config.js
similarity index 100%
rename from playground/default-ts-with-tests/vite.config.ts
rename to playground/jsx/vite.config.js
diff --git a/playground/spa-ts/.gitignore b/playground/router-vuex-with-tests/.gitignore
similarity index 100%
rename from playground/spa-ts/.gitignore
rename to playground/router-vuex-with-tests/.gitignore
diff --git a/playground/router-vuex-with-tests/README.md b/playground/router-vuex-with-tests/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/router-vuex-with-tests/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/default-with-tests/cypress.json b/playground/router-vuex-with-tests/cypress.json
similarity index 100%
rename from playground/default-with-tests/cypress.json
rename to playground/router-vuex-with-tests/cypress.json
diff --git a/playground/default-with-tests/cypress/fixtures/example.json b/playground/router-vuex-with-tests/cypress/fixtures/example.json
similarity index 100%
rename from playground/default-with-tests/cypress/fixtures/example.json
rename to playground/router-vuex-with-tests/cypress/fixtures/example.json
diff --git a/playground/router-vuex-with-tests/cypress/integration/example.spec.js b/playground/router-vuex-with-tests/cypress/integration/example.spec.js
new file mode 100644
index 00000000..ec952ec4
--- /dev/null
+++ b/playground/router-vuex-with-tests/cypress/integration/example.spec.js
@@ -0,0 +1,13 @@
+// https://docs.cypress.io/api/introduction/api.html
+
+describe('My First Test', () => {
+  it('visits the app root url', () => {
+    cy.visit('/')
+    cy.contains('h1', 'Hello Vue 3 + Vite')
+  })
+
+  it('navigates to the about page', () => {
+    cy.visit('/about')
+    cy.contains('h1', 'This is an about page')
+  })
+})
diff --git a/playground/spa-with-tests/cypress/jsconfig.json b/playground/router-vuex-with-tests/cypress/jsconfig.json
similarity index 100%
rename from playground/spa-with-tests/cypress/jsconfig.json
rename to playground/router-vuex-with-tests/cypress/jsconfig.json
diff --git a/playground/spa-with-tests/cypress/plugins/index.js b/playground/router-vuex-with-tests/cypress/plugins/index.js
similarity index 100%
rename from playground/spa-with-tests/cypress/plugins/index.js
rename to playground/router-vuex-with-tests/cypress/plugins/index.js
diff --git a/playground/spa-with-tests/cypress/support/commands.js b/playground/router-vuex-with-tests/cypress/support/commands.js
similarity index 100%
rename from playground/spa-with-tests/cypress/support/commands.js
rename to playground/router-vuex-with-tests/cypress/support/commands.js
diff --git a/playground/spa-with-tests/cypress/support/index.js b/playground/router-vuex-with-tests/cypress/support/index.js
similarity index 100%
rename from playground/spa-with-tests/cypress/support/index.js
rename to playground/router-vuex-with-tests/cypress/support/index.js
diff --git a/playground/spa-ts/index.html b/playground/router-vuex-with-tests/index.html
similarity index 100%
rename from playground/spa-ts/index.html
rename to playground/router-vuex-with-tests/index.html
diff --git a/playground/router-vuex-with-tests/jsconfig.json b/playground/router-vuex-with-tests/jsconfig.json
new file mode 100644
index 00000000..6f98acfa
--- /dev/null
+++ b/playground/router-vuex-with-tests/jsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/**"]
+}
diff --git a/playground/default-ts-with-tests/package.json b/playground/router-vuex-with-tests/package.json
similarity index 68%
rename from playground/default-ts-with-tests/package.json
rename to playground/router-vuex-with-tests/package.json
index fee85fe2..65d87f51 100644
--- a/playground/default-ts-with-tests/package.json
+++ b/playground/router-vuex-with-tests/package.json
@@ -1,30 +1,28 @@
 {
-  "name": "default-ts-with-tests",
+  "name": "router-vuex-with-tests",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vite build",
     "preserve": "vite build",
     "serve": "vite preview --port 5050",
     "test:unit": "cypress open-ct",
     "test:unit:ci": "cypress run-ct --quiet --reporter spec",
     "test:e2e": "start-server-and-test serve 5050 'cypress open'",
-    "test:e2e:ci": "start-server-and-test serve 5050 'cypress run'",
-    "typecheck": "vue-tsc --noEmit"
+    "test:e2e:ci": "start-server-and-test serve 5050 'cypress run'"
   },
   "dependencies": {
-    "vue": "^3.1.5"
+    "vue": "^3.1.5",
+    "vue-router": "^4.0.10",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.2.5",
-    "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.1.5",
     "vite": "^2.4.3",
     "@cypress/vite-dev-server": "^2.0.2",
     "@cypress/vue": "^3.0.1",
     "cypress": "^8.0.0",
-    "start-server-and-test": "^1.12.6",
-    "typescript": "~4.3.5",
-    "vue-tsc": "^0.2.2"
+    "start-server-and-test": "^1.12.6"
   }
 }
diff --git a/playground/spa-ts/public/favicon.ico b/playground/router-vuex-with-tests/public/favicon.ico
similarity index 100%
rename from playground/spa-ts/public/favicon.ico
rename to playground/router-vuex-with-tests/public/favicon.ico
diff --git a/playground/spa/src/App.vue b/playground/router-vuex-with-tests/src/App.vue
similarity index 100%
rename from playground/spa/src/App.vue
rename to playground/router-vuex-with-tests/src/App.vue
diff --git a/playground/spa-ts/src/assets/logo.png b/playground/router-vuex-with-tests/src/assets/logo.png
similarity index 100%
rename from playground/spa-ts/src/assets/logo.png
rename to playground/router-vuex-with-tests/src/assets/logo.png
diff --git a/playground/router-vuex-with-tests/src/components/HelloWorld.vue b/playground/router-vuex-with-tests/src/components/HelloWorld.vue
new file mode 100644
index 00000000..51f81a8f
--- /dev/null
+++ b/playground/router-vuex-with-tests/src/components/HelloWorld.vue
@@ -0,0 +1,57 @@
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Docs
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>
diff --git a/playground/spa-with-tests/src/components/__tests__/HelloWorld.spec.js b/playground/router-vuex-with-tests/src/components/__tests__/HelloWorld.spec.js
similarity index 100%
rename from playground/spa-with-tests/src/components/__tests__/HelloWorld.spec.js
rename to playground/router-vuex-with-tests/src/components/__tests__/HelloWorld.spec.js
diff --git a/playground/spa-ts-with-tests/src/main.ts b/playground/router-vuex-with-tests/src/main.js
similarity index 100%
rename from playground/spa-ts-with-tests/src/main.ts
rename to playground/router-vuex-with-tests/src/main.js
diff --git a/playground/router-vuex-with-tests/src/router/index.js b/playground/router-vuex-with-tests/src/router/index.js
new file mode 100644
index 00000000..26bf8e7e
--- /dev/null
+++ b/playground/router-vuex-with-tests/src/router/index.js
@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (About.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import('../views/About.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+export default router
diff --git a/playground/spa-ts-with-tests/src/store/index.ts b/playground/router-vuex-with-tests/src/store/index.js
similarity index 100%
rename from playground/spa-ts-with-tests/src/store/index.ts
rename to playground/router-vuex-with-tests/src/store/index.js
diff --git a/playground/spa/src/views/About.vue b/playground/router-vuex-with-tests/src/views/About.vue
similarity index 100%
rename from playground/spa/src/views/About.vue
rename to playground/router-vuex-with-tests/src/views/About.vue
diff --git a/playground/router-vuex-with-tests/src/views/Home.vue b/playground/router-vuex-with-tests/src/views/Home.vue
new file mode 100644
index 00000000..d74dda2c
--- /dev/null
+++ b/playground/router-vuex-with-tests/src/views/Home.vue
@@ -0,0 +1,19 @@
+<template>
+  <img alt="Vue logo" src="@/assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<script setup>
+import HelloWorld from '@/components/HelloWorld.vue'
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/playground/router-vuex-with-tests/vite-env.d.ts b/playground/router-vuex-with-tests/vite-env.d.ts
new file mode 100644
index 00000000..636d9c3f
--- /dev/null
+++ b/playground/router-vuex-with-tests/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/playground/router-vuex-with-tests/vite.config.js b/playground/router-vuex-with-tests/vite.config.js
new file mode 100644
index 00000000..24c2e504
--- /dev/null
+++ b/playground/router-vuex-with-tests/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@/': new URL('./src/', import.meta.url).pathname
+    }
+  }
+})
diff --git a/playground/spa-with-tests/.gitignore b/playground/router-vuex/.gitignore
similarity index 100%
rename from playground/spa-with-tests/.gitignore
rename to playground/router-vuex/.gitignore
diff --git a/playground/router-vuex/README.md b/playground/router-vuex/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/router-vuex/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/spa-with-tests/index.html b/playground/router-vuex/index.html
similarity index 100%
rename from playground/spa-with-tests/index.html
rename to playground/router-vuex/index.html
diff --git a/playground/router-vuex/jsconfig.json b/playground/router-vuex/jsconfig.json
new file mode 100644
index 00000000..6f98acfa
--- /dev/null
+++ b/playground/router-vuex/jsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/**"]
+}
diff --git a/playground/spa/package.json b/playground/router-vuex/package.json
similarity index 86%
rename from playground/spa/package.json
rename to playground/router-vuex/package.json
index bc2cd488..ae370045 100644
--- a/playground/spa/package.json
+++ b/playground/router-vuex/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "spa",
+  "name": "router-vuex",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
@@ -14,7 +14,6 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.2.5",
-    "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.1.5",
     "vite": "^2.4.3"
   }
diff --git a/playground/spa-with-tests/public/favicon.ico b/playground/router-vuex/public/favicon.ico
similarity index 100%
rename from playground/spa-with-tests/public/favicon.ico
rename to playground/router-vuex/public/favicon.ico
diff --git a/playground/router-vuex/src/App.vue b/playground/router-vuex/src/App.vue
new file mode 100644
index 00000000..6a65bcc1
--- /dev/null
+++ b/playground/router-vuex/src/App.vue
@@ -0,0 +1,30 @@
+<template>
+  <div id="nav">
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
+  </div>
+  <router-view />
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+</style>
diff --git a/playground/spa-with-tests/src/assets/logo.png b/playground/router-vuex/src/assets/logo.png
similarity index 100%
rename from playground/spa-with-tests/src/assets/logo.png
rename to playground/router-vuex/src/assets/logo.png
diff --git a/playground/router-vuex/src/components/HelloWorld.vue b/playground/router-vuex/src/components/HelloWorld.vue
new file mode 100644
index 00000000..51f81a8f
--- /dev/null
+++ b/playground/router-vuex/src/components/HelloWorld.vue
@@ -0,0 +1,57 @@
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Docs
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>
diff --git a/playground/spa-ts/src/main.ts b/playground/router-vuex/src/main.js
similarity index 100%
rename from playground/spa-ts/src/main.ts
rename to playground/router-vuex/src/main.js
diff --git a/playground/router-vuex/src/router/index.js b/playground/router-vuex/src/router/index.js
new file mode 100644
index 00000000..26bf8e7e
--- /dev/null
+++ b/playground/router-vuex/src/router/index.js
@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (About.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import('../views/About.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+export default router
diff --git a/playground/spa-ts/src/store/index.ts b/playground/router-vuex/src/store/index.js
similarity index 100%
rename from playground/spa-ts/src/store/index.ts
rename to playground/router-vuex/src/store/index.js
diff --git a/playground/router-vuex/src/views/About.vue b/playground/router-vuex/src/views/About.vue
new file mode 100644
index 00000000..3fa28070
--- /dev/null
+++ b/playground/router-vuex/src/views/About.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
diff --git a/playground/router-vuex/src/views/Home.vue b/playground/router-vuex/src/views/Home.vue
new file mode 100644
index 00000000..d74dda2c
--- /dev/null
+++ b/playground/router-vuex/src/views/Home.vue
@@ -0,0 +1,19 @@
+<template>
+  <img alt="Vue logo" src="@/assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<script setup>
+import HelloWorld from '@/components/HelloWorld.vue'
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/playground/router-vuex/vite-env.d.ts b/playground/router-vuex/vite-env.d.ts
new file mode 100644
index 00000000..636d9c3f
--- /dev/null
+++ b/playground/router-vuex/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/playground/router-vuex/vite.config.js b/playground/router-vuex/vite.config.js
new file mode 100644
index 00000000..24c2e504
--- /dev/null
+++ b/playground/router-vuex/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@/': new URL('./src/', import.meta.url).pathname
+    }
+  }
+})
diff --git a/playground/spa/.gitignore b/playground/router/.gitignore
similarity index 100%
rename from playground/spa/.gitignore
rename to playground/router/.gitignore
diff --git a/playground/router/README.md b/playground/router/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/router/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/spa/index.html b/playground/router/index.html
similarity index 100%
rename from playground/spa/index.html
rename to playground/router/index.html
diff --git a/playground/router/jsconfig.json b/playground/router/jsconfig.json
new file mode 100644
index 00000000..6f98acfa
--- /dev/null
+++ b/playground/router/jsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/**"]
+}
diff --git a/playground/router/package.json b/playground/router/package.json
new file mode 100644
index 00000000..2c75ccc9
--- /dev/null
+++ b/playground/router/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "router",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preserve": "vite build",
+    "serve": "vite preview --port 5050"
+  },
+  "dependencies": {
+    "vue": "^3.1.5",
+    "vue-router": "^4.0.10"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.2.5",
+    "@vue/compiler-sfc": "^3.1.5",
+    "vite": "^2.4.3"
+  }
+}
diff --git a/playground/spa/public/favicon.ico b/playground/router/public/favicon.ico
similarity index 100%
rename from playground/spa/public/favicon.ico
rename to playground/router/public/favicon.ico
diff --git a/playground/router/src/App.vue b/playground/router/src/App.vue
new file mode 100644
index 00000000..6a65bcc1
--- /dev/null
+++ b/playground/router/src/App.vue
@@ -0,0 +1,30 @@
+<template>
+  <div id="nav">
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
+  </div>
+  <router-view />
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+</style>
diff --git a/playground/spa/src/assets/logo.png b/playground/router/src/assets/logo.png
similarity index 100%
rename from playground/spa/src/assets/logo.png
rename to playground/router/src/assets/logo.png
diff --git a/playground/router/src/components/HelloWorld.vue b/playground/router/src/components/HelloWorld.vue
new file mode 100644
index 00000000..51f81a8f
--- /dev/null
+++ b/playground/router/src/components/HelloWorld.vue
@@ -0,0 +1,57 @@
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Docs
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>
diff --git a/playground/router/src/main.js b/playground/router/src/main.js
new file mode 100644
index 00000000..c8e37b03
--- /dev/null
+++ b/playground/router/src/main.js
@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')
diff --git a/playground/router/src/router/index.js b/playground/router/src/router/index.js
new file mode 100644
index 00000000..26bf8e7e
--- /dev/null
+++ b/playground/router/src/router/index.js
@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (About.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import('../views/About.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+export default router
diff --git a/playground/router/src/views/About.vue b/playground/router/src/views/About.vue
new file mode 100644
index 00000000..3fa28070
--- /dev/null
+++ b/playground/router/src/views/About.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
diff --git a/playground/router/src/views/Home.vue b/playground/router/src/views/Home.vue
new file mode 100644
index 00000000..d74dda2c
--- /dev/null
+++ b/playground/router/src/views/Home.vue
@@ -0,0 +1,19 @@
+<template>
+  <img alt="Vue logo" src="@/assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<script setup>
+import HelloWorld from '@/components/HelloWorld.vue'
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/playground/router/vite-env.d.ts b/playground/router/vite-env.d.ts
new file mode 100644
index 00000000..636d9c3f
--- /dev/null
+++ b/playground/router/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/playground/router/vite.config.js b/playground/router/vite.config.js
new file mode 100644
index 00000000..24c2e504
--- /dev/null
+++ b/playground/router/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@/': new URL('./src/', import.meta.url).pathname
+    }
+  }
+})
diff --git a/playground/spa-ts-with-tests/README.md b/playground/spa-ts-with-tests/README.md
deleted file mode 100644
index e69de29b..00000000
diff --git a/playground/spa-ts-with-tests/src/shims-vue.d.ts b/playground/spa-ts-with-tests/src/shims-vue.d.ts
deleted file mode 100644
index ec4f1b2e..00000000
--- a/playground/spa-ts-with-tests/src/shims-vue.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  // eslint-disable-next-line
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
diff --git a/playground/spa-ts-with-tests/src/vite-env.d.ts b/playground/spa-ts-with-tests/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe2..00000000
--- a/playground/spa-ts-with-tests/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/playground/spa-ts/README.md b/playground/spa-ts/README.md
deleted file mode 100644
index e69de29b..00000000
diff --git a/playground/spa-ts/src/shims-vue.d.ts b/playground/spa-ts/src/shims-vue.d.ts
deleted file mode 100644
index ec4f1b2e..00000000
--- a/playground/spa-ts/src/shims-vue.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  // eslint-disable-next-line
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
diff --git a/playground/spa-ts/src/vite-env.d.ts b/playground/spa-ts/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe2..00000000
--- a/playground/spa-ts/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/playground/spa-with-tests/README.md b/playground/spa-with-tests/README.md
deleted file mode 100644
index e69de29b..00000000
diff --git a/playground/spa-with-tests/src/shims-vue.d.ts b/playground/spa-with-tests/src/shims-vue.d.ts
deleted file mode 100644
index ec4f1b2e..00000000
--- a/playground/spa-with-tests/src/shims-vue.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  // eslint-disable-next-line
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
diff --git a/playground/spa-with-tests/src/vite-env.d.ts b/playground/spa-with-tests/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe2..00000000
--- a/playground/spa-with-tests/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/playground/spa/README.md b/playground/spa/README.md
deleted file mode 100644
index e69de29b..00000000
diff --git a/playground/spa/src/shims-vue.d.ts b/playground/spa/src/shims-vue.d.ts
deleted file mode 100644
index ec4f1b2e..00000000
--- a/playground/spa/src/shims-vue.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  // eslint-disable-next-line
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
diff --git a/playground/spa/src/vite-env.d.ts b/playground/spa/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe2..00000000
--- a/playground/spa/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/playground/typescript-jsx-router-vuex-with-tests/.gitignore b/playground/typescript-jsx-router-vuex-with-tests/.gitignore
new file mode 100644
index 00000000..133da84e
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex-with-tests/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/playground/typescript-jsx-router-vuex-with-tests/README.md b/playground/typescript-jsx-router-vuex-with-tests/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex-with-tests/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/spa-ts-with-tests/cypress.json b/playground/typescript-jsx-router-vuex-with-tests/cypress.json
similarity index 100%
rename from playground/spa-ts-with-tests/cypress.json
rename to playground/typescript-jsx-router-vuex-with-tests/cypress.json
diff --git a/playground/spa-ts-with-tests/cypress/fixtures/example.json b/playground/typescript-jsx-router-vuex-with-tests/cypress/fixtures/example.json
similarity index 100%
rename from playground/spa-ts-with-tests/cypress/fixtures/example.json
rename to playground/typescript-jsx-router-vuex-with-tests/cypress/fixtures/example.json
diff --git a/playground/spa-ts-with-tests/cypress/integration/example.spec.ts b/playground/typescript-jsx-router-vuex-with-tests/cypress/integration/example.spec.ts
similarity index 100%
rename from playground/spa-ts-with-tests/cypress/integration/example.spec.ts
rename to playground/typescript-jsx-router-vuex-with-tests/cypress/integration/example.spec.ts
diff --git a/playground/default-ts-with-tests/cypress/plugins/index.ts b/playground/typescript-jsx-router-vuex-with-tests/cypress/plugins/index.ts
similarity index 100%
rename from playground/default-ts-with-tests/cypress/plugins/index.ts
rename to playground/typescript-jsx-router-vuex-with-tests/cypress/plugins/index.ts
diff --git a/playground/default-ts-with-tests/cypress/support/commands.ts b/playground/typescript-jsx-router-vuex-with-tests/cypress/support/commands.ts
similarity index 100%
rename from playground/default-ts-with-tests/cypress/support/commands.ts
rename to playground/typescript-jsx-router-vuex-with-tests/cypress/support/commands.ts
diff --git a/playground/default-ts-with-tests/cypress/support/index.ts b/playground/typescript-jsx-router-vuex-with-tests/cypress/support/index.ts
similarity index 100%
rename from playground/default-ts-with-tests/cypress/support/index.ts
rename to playground/typescript-jsx-router-vuex-with-tests/cypress/support/index.ts
diff --git a/playground/default-ts-with-tests/cypress/tsconfig.json b/playground/typescript-jsx-router-vuex-with-tests/cypress/tsconfig.json
similarity index 100%
rename from playground/default-ts-with-tests/cypress/tsconfig.json
rename to playground/typescript-jsx-router-vuex-with-tests/cypress/tsconfig.json
diff --git a/playground/typescript-jsx-router-vuex-with-tests/index.html b/playground/typescript-jsx-router-vuex-with-tests/index.html
new file mode 100644
index 00000000..11603f87
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex-with-tests/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/playground/spa-ts-with-tests/package.json b/playground/typescript-jsx-router-vuex-with-tests/package.json
similarity index 94%
rename from playground/spa-ts-with-tests/package.json
rename to playground/typescript-jsx-router-vuex-with-tests/package.json
index c55fef80..d74580bd 100644
--- a/playground/spa-ts-with-tests/package.json
+++ b/playground/typescript-jsx-router-vuex-with-tests/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "spa-ts-with-tests",
+  "name": "typescript-jsx-router-vuex-with-tests",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
@@ -19,9 +19,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.2.5",
-    "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.1.5",
     "vite": "^2.4.3",
+    "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@cypress/vite-dev-server": "^2.0.2",
     "@cypress/vue": "^3.0.1",
     "cypress": "^8.0.0",
diff --git a/playground/typescript-jsx-router-vuex-with-tests/public/favicon.ico b/playground/typescript-jsx-router-vuex-with-tests/public/favicon.ico
new file mode 100644
index 00000000..df36fcfb
Binary files /dev/null and b/playground/typescript-jsx-router-vuex-with-tests/public/favicon.ico differ
diff --git a/playground/typescript-jsx-router-vuex-with-tests/src/App.vue b/playground/typescript-jsx-router-vuex-with-tests/src/App.vue
new file mode 100644
index 00000000..6a65bcc1
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex-with-tests/src/App.vue
@@ -0,0 +1,30 @@
+<template>
+  <div id="nav">
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
+  </div>
+  <router-view />
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+</style>
diff --git a/playground/typescript-jsx-router-vuex-with-tests/src/assets/logo.png b/playground/typescript-jsx-router-vuex-with-tests/src/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/playground/typescript-jsx-router-vuex-with-tests/src/assets/logo.png differ
diff --git a/playground/default-ts-with-tests/src/components/HelloWorld.vue b/playground/typescript-jsx-router-vuex-with-tests/src/components/HelloWorld.vue
similarity index 100%
rename from playground/default-ts-with-tests/src/components/HelloWorld.vue
rename to playground/typescript-jsx-router-vuex-with-tests/src/components/HelloWorld.vue
diff --git a/playground/default-ts-with-tests/src/components/__tests__/HelloWorld.spec.ts b/playground/typescript-jsx-router-vuex-with-tests/src/components/__tests__/HelloWorld.spec.ts
similarity index 100%
rename from playground/default-ts-with-tests/src/components/__tests__/HelloWorld.spec.ts
rename to playground/typescript-jsx-router-vuex-with-tests/src/components/__tests__/HelloWorld.spec.ts
diff --git a/playground/typescript-jsx-router-vuex-with-tests/src/main.ts b/playground/typescript-jsx-router-vuex-with-tests/src/main.ts
new file mode 100644
index 00000000..ab55e6d5
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex-with-tests/src/main.ts
@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import router from './router'
+import store from './store'
+
+const app = createApp(App)
+
+app.use(router)
+app.use(store)
+
+app.mount('#app')
diff --git a/playground/spa-ts-with-tests/src/router/index.ts b/playground/typescript-jsx-router-vuex-with-tests/src/router/index.ts
similarity index 100%
rename from playground/spa-ts-with-tests/src/router/index.ts
rename to playground/typescript-jsx-router-vuex-with-tests/src/router/index.ts
diff --git a/playground/typescript-jsx-router-vuex-with-tests/src/store/index.ts b/playground/typescript-jsx-router-vuex-with-tests/src/store/index.ts
new file mode 100644
index 00000000..2b9da8fe
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex-with-tests/src/store/index.ts
@@ -0,0 +1,8 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {}
+})
diff --git a/playground/typescript-jsx-router-vuex-with-tests/src/views/About.vue b/playground/typescript-jsx-router-vuex-with-tests/src/views/About.vue
new file mode 100644
index 00000000..3fa28070
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex-with-tests/src/views/About.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
diff --git a/playground/spa-ts-with-tests/src/views/Home.vue b/playground/typescript-jsx-router-vuex-with-tests/src/views/Home.vue
similarity index 100%
rename from playground/spa-ts-with-tests/src/views/Home.vue
rename to playground/typescript-jsx-router-vuex-with-tests/src/views/Home.vue
diff --git a/playground/default-ts-with-tests/tsconfig.json b/playground/typescript-jsx-router-vuex-with-tests/tsconfig.json
similarity index 85%
rename from playground/default-ts-with-tests/tsconfig.json
rename to playground/typescript-jsx-router-vuex-with-tests/tsconfig.json
index 9c2cfe6b..6f98acfa 100644
--- a/playground/default-ts-with-tests/tsconfig.json
+++ b/playground/typescript-jsx-router-vuex-with-tests/tsconfig.json
@@ -16,6 +16,6 @@
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
     "skipLibCheck": true
   },
-  "include": ["vite.config.*", "src/**/*", "src/**/*.vue"],
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/**"]
 }
diff --git a/playground/typescript-jsx-router-vuex-with-tests/vite-env.d.ts b/playground/typescript-jsx-router-vuex-with-tests/vite-env.d.ts
new file mode 100644
index 00000000..636d9c3f
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex-with-tests/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/playground/default-ts/vite.config.ts b/playground/typescript-jsx-router-vuex-with-tests/vite.config.ts
similarity index 100%
rename from playground/default-ts/vite.config.ts
rename to playground/typescript-jsx-router-vuex-with-tests/vite.config.ts
diff --git a/playground/typescript-jsx-router-vuex/.gitignore b/playground/typescript-jsx-router-vuex/.gitignore
new file mode 100644
index 00000000..133da84e
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/playground/typescript-jsx-router-vuex/README.md b/playground/typescript-jsx-router-vuex/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/typescript-jsx-router-vuex/index.html b/playground/typescript-jsx-router-vuex/index.html
new file mode 100644
index 00000000..11603f87
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/playground/spa-ts/package.json b/playground/typescript-jsx-router-vuex/package.json
similarity index 92%
rename from playground/spa-ts/package.json
rename to playground/typescript-jsx-router-vuex/package.json
index afa896da..ab9944f6 100644
--- a/playground/spa-ts/package.json
+++ b/playground/typescript-jsx-router-vuex/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "spa-ts",
+  "name": "typescript-jsx-router-vuex",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
@@ -15,9 +15,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.2.5",
-    "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.1.5",
     "vite": "^2.4.3",
+    "@vitejs/plugin-vue-jsx": "^1.1.6",
     "typescript": "~4.3.5",
     "vue-tsc": "^0.2.2"
   }
diff --git a/playground/typescript-jsx-router-vuex/public/favicon.ico b/playground/typescript-jsx-router-vuex/public/favicon.ico
new file mode 100644
index 00000000..df36fcfb
Binary files /dev/null and b/playground/typescript-jsx-router-vuex/public/favicon.ico differ
diff --git a/playground/typescript-jsx-router-vuex/src/App.vue b/playground/typescript-jsx-router-vuex/src/App.vue
new file mode 100644
index 00000000..6a65bcc1
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex/src/App.vue
@@ -0,0 +1,30 @@
+<template>
+  <div id="nav">
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
+  </div>
+  <router-view />
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+</style>
diff --git a/playground/typescript-jsx-router-vuex/src/assets/logo.png b/playground/typescript-jsx-router-vuex/src/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/playground/typescript-jsx-router-vuex/src/assets/logo.png differ
diff --git a/playground/default-ts/src/components/HelloWorld.vue b/playground/typescript-jsx-router-vuex/src/components/HelloWorld.vue
similarity index 100%
rename from playground/default-ts/src/components/HelloWorld.vue
rename to playground/typescript-jsx-router-vuex/src/components/HelloWorld.vue
diff --git a/playground/typescript-jsx-router-vuex/src/main.ts b/playground/typescript-jsx-router-vuex/src/main.ts
new file mode 100644
index 00000000..ab55e6d5
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex/src/main.ts
@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import router from './router'
+import store from './store'
+
+const app = createApp(App)
+
+app.use(router)
+app.use(store)
+
+app.mount('#app')
diff --git a/playground/spa-ts/src/router/index.ts b/playground/typescript-jsx-router-vuex/src/router/index.ts
similarity index 100%
rename from playground/spa-ts/src/router/index.ts
rename to playground/typescript-jsx-router-vuex/src/router/index.ts
diff --git a/playground/typescript-jsx-router-vuex/src/store/index.ts b/playground/typescript-jsx-router-vuex/src/store/index.ts
new file mode 100644
index 00000000..2b9da8fe
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex/src/store/index.ts
@@ -0,0 +1,8 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {}
+})
diff --git a/playground/typescript-jsx-router-vuex/src/views/About.vue b/playground/typescript-jsx-router-vuex/src/views/About.vue
new file mode 100644
index 00000000..3fa28070
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex/src/views/About.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
diff --git a/playground/spa-ts/src/views/Home.vue b/playground/typescript-jsx-router-vuex/src/views/Home.vue
similarity index 100%
rename from playground/spa-ts/src/views/Home.vue
rename to playground/typescript-jsx-router-vuex/src/views/Home.vue
diff --git a/playground/spa-ts-with-tests/tsconfig.json b/playground/typescript-jsx-router-vuex/tsconfig.json
similarity index 85%
rename from playground/spa-ts-with-tests/tsconfig.json
rename to playground/typescript-jsx-router-vuex/tsconfig.json
index 9c2cfe6b..6f98acfa 100644
--- a/playground/spa-ts-with-tests/tsconfig.json
+++ b/playground/typescript-jsx-router-vuex/tsconfig.json
@@ -16,6 +16,6 @@
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
     "skipLibCheck": true
   },
-  "include": ["vite.config.*", "src/**/*", "src/**/*.vue"],
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/**"]
 }
diff --git a/playground/typescript-jsx-router-vuex/vite-env.d.ts b/playground/typescript-jsx-router-vuex/vite-env.d.ts
new file mode 100644
index 00000000..636d9c3f
--- /dev/null
+++ b/playground/typescript-jsx-router-vuex/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/playground/spa-ts-with-tests/vite.config.ts b/playground/typescript-jsx-router-vuex/vite.config.ts
similarity index 100%
rename from playground/spa-ts-with-tests/vite.config.ts
rename to playground/typescript-jsx-router-vuex/vite.config.ts
diff --git a/playground/typescript-jsx-router/.gitignore b/playground/typescript-jsx-router/.gitignore
new file mode 100644
index 00000000..133da84e
--- /dev/null
+++ b/playground/typescript-jsx-router/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/playground/typescript-jsx-router/README.md b/playground/typescript-jsx-router/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/typescript-jsx-router/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/typescript-jsx-router/index.html b/playground/typescript-jsx-router/index.html
new file mode 100644
index 00000000..11603f87
--- /dev/null
+++ b/playground/typescript-jsx-router/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/playground/typescript-jsx-router/package.json b/playground/typescript-jsx-router/package.json
new file mode 100644
index 00000000..c2196de6
--- /dev/null
+++ b/playground/typescript-jsx-router/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "typescript-jsx-router",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preserve": "vite build",
+    "serve": "vite preview --port 5050",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "vue": "^3.1.5",
+    "vue-router": "^4.0.10"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.2.5",
+    "@vue/compiler-sfc": "^3.1.5",
+    "vite": "^2.4.3",
+    "@vitejs/plugin-vue-jsx": "^1.1.6",
+    "typescript": "~4.3.5",
+    "vue-tsc": "^0.2.2"
+  }
+}
diff --git a/playground/typescript-jsx-router/public/favicon.ico b/playground/typescript-jsx-router/public/favicon.ico
new file mode 100644
index 00000000..df36fcfb
Binary files /dev/null and b/playground/typescript-jsx-router/public/favicon.ico differ
diff --git a/playground/typescript-jsx-router/src/App.vue b/playground/typescript-jsx-router/src/App.vue
new file mode 100644
index 00000000..6a65bcc1
--- /dev/null
+++ b/playground/typescript-jsx-router/src/App.vue
@@ -0,0 +1,30 @@
+<template>
+  <div id="nav">
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
+  </div>
+  <router-view />
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+</style>
diff --git a/playground/typescript-jsx-router/src/assets/logo.png b/playground/typescript-jsx-router/src/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/playground/typescript-jsx-router/src/assets/logo.png differ
diff --git a/playground/spa-ts-with-tests/src/components/HelloWorld.vue b/playground/typescript-jsx-router/src/components/HelloWorld.vue
similarity index 100%
rename from playground/spa-ts-with-tests/src/components/HelloWorld.vue
rename to playground/typescript-jsx-router/src/components/HelloWorld.vue
diff --git a/playground/typescript-jsx-router/src/main.ts b/playground/typescript-jsx-router/src/main.ts
new file mode 100644
index 00000000..c8e37b03
--- /dev/null
+++ b/playground/typescript-jsx-router/src/main.ts
@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')
diff --git a/playground/typescript-jsx-router/src/router/index.ts b/playground/typescript-jsx-router/src/router/index.ts
new file mode 100644
index 00000000..06036285
--- /dev/null
+++ b/playground/typescript-jsx-router/src/router/index.ts
@@ -0,0 +1,27 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+
+import Home from '../views/Home.vue'
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (About.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import('../views/About.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+export default router
diff --git a/playground/typescript-jsx-router/src/views/About.vue b/playground/typescript-jsx-router/src/views/About.vue
new file mode 100644
index 00000000..3fa28070
--- /dev/null
+++ b/playground/typescript-jsx-router/src/views/About.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
diff --git a/playground/typescript-jsx-router/src/views/Home.vue b/playground/typescript-jsx-router/src/views/Home.vue
new file mode 100644
index 00000000..4ade1db6
--- /dev/null
+++ b/playground/typescript-jsx-router/src/views/Home.vue
@@ -0,0 +1,19 @@
+<template>
+  <img alt="Vue logo" src="@/assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+</template>
+
+<script setup lang="ts">
+import HelloWorld from '@/components/HelloWorld.vue'
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/playground/spa-ts/tsconfig.json b/playground/typescript-jsx-router/tsconfig.json
similarity index 85%
rename from playground/spa-ts/tsconfig.json
rename to playground/typescript-jsx-router/tsconfig.json
index 9c2cfe6b..6f98acfa 100644
--- a/playground/spa-ts/tsconfig.json
+++ b/playground/typescript-jsx-router/tsconfig.json
@@ -16,6 +16,6 @@
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
     "skipLibCheck": true
   },
-  "include": ["vite.config.*", "src/**/*", "src/**/*.vue"],
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/**"]
 }
diff --git a/playground/typescript-jsx-router/vite-env.d.ts b/playground/typescript-jsx-router/vite-env.d.ts
new file mode 100644
index 00000000..636d9c3f
--- /dev/null
+++ b/playground/typescript-jsx-router/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/playground/spa-ts/vite.config.ts b/playground/typescript-jsx-router/vite.config.ts
similarity index 100%
rename from playground/spa-ts/vite.config.ts
rename to playground/typescript-jsx-router/vite.config.ts
diff --git a/playground/typescript-jsx/.gitignore b/playground/typescript-jsx/.gitignore
new file mode 100644
index 00000000..133da84e
--- /dev/null
+++ b/playground/typescript-jsx/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/playground/typescript-jsx/README.md b/playground/typescript-jsx/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/typescript-jsx/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/typescript-jsx/index.html b/playground/typescript-jsx/index.html
new file mode 100644
index 00000000..11603f87
--- /dev/null
+++ b/playground/typescript-jsx/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/playground/default-ts/package.json b/playground/typescript-jsx/package.json
similarity index 94%
rename from playground/default-ts/package.json
rename to playground/typescript-jsx/package.json
index 875e356b..a161a228 100644
--- a/playground/default-ts/package.json
+++ b/playground/typescript-jsx/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "default-ts",
+  "name": "typescript-jsx",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
@@ -13,9 +13,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.2.5",
-    "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.1.5",
     "vite": "^2.4.3",
+    "@vitejs/plugin-vue-jsx": "^1.1.6",
     "typescript": "~4.3.5",
     "vue-tsc": "^0.2.2"
   }
diff --git a/playground/typescript-jsx/public/favicon.ico b/playground/typescript-jsx/public/favicon.ico
new file mode 100644
index 00000000..df36fcfb
Binary files /dev/null and b/playground/typescript-jsx/public/favicon.ico differ
diff --git a/playground/default-ts-with-tests/src/App.vue b/playground/typescript-jsx/src/App.vue
similarity index 100%
rename from playground/default-ts-with-tests/src/App.vue
rename to playground/typescript-jsx/src/App.vue
diff --git a/playground/typescript-jsx/src/assets/logo.png b/playground/typescript-jsx/src/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/playground/typescript-jsx/src/assets/logo.png differ
diff --git a/playground/spa-ts/src/components/HelloWorld.vue b/playground/typescript-jsx/src/components/HelloWorld.vue
similarity index 100%
rename from playground/spa-ts/src/components/HelloWorld.vue
rename to playground/typescript-jsx/src/components/HelloWorld.vue
diff --git a/playground/default-ts-with-tests/src/main.ts b/playground/typescript-jsx/src/main.ts
similarity index 100%
rename from playground/default-ts-with-tests/src/main.ts
rename to playground/typescript-jsx/src/main.ts
diff --git a/playground/default-ts/tsconfig.json b/playground/typescript-jsx/tsconfig.json
similarity index 85%
rename from playground/default-ts/tsconfig.json
rename to playground/typescript-jsx/tsconfig.json
index 9c2cfe6b..6f98acfa 100644
--- a/playground/default-ts/tsconfig.json
+++ b/playground/typescript-jsx/tsconfig.json
@@ -16,6 +16,6 @@
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
     "skipLibCheck": true
   },
-  "include": ["vite.config.*", "src/**/*", "src/**/*.vue"],
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/**"]
 }
diff --git a/playground/typescript-jsx/vite-env.d.ts b/playground/typescript-jsx/vite-env.d.ts
new file mode 100644
index 00000000..636d9c3f
--- /dev/null
+++ b/playground/typescript-jsx/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/playground/typescript-jsx/vite.config.ts b/playground/typescript-jsx/vite.config.ts
new file mode 100644
index 00000000..032e163c
--- /dev/null
+++ b/playground/typescript-jsx/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx()],
+  resolve: {
+    alias: {
+      '@/': new URL('./src/', import.meta.url).pathname
+    }
+  }
+})
diff --git a/playground/typescript/.gitignore b/playground/typescript/.gitignore
new file mode 100644
index 00000000..133da84e
--- /dev/null
+++ b/playground/typescript/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/playground/typescript/README.md b/playground/typescript/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/typescript/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/typescript/index.html b/playground/typescript/index.html
new file mode 100644
index 00000000..11603f87
--- /dev/null
+++ b/playground/typescript/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/playground/typescript/package.json b/playground/typescript/package.json
new file mode 100644
index 00000000..c3c3ee7a
--- /dev/null
+++ b/playground/typescript/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "typescript",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preserve": "vite build",
+    "serve": "vite preview --port 5050",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "vue": "^3.1.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.2.5",
+    "@vue/compiler-sfc": "^3.1.5",
+    "vite": "^2.4.3",
+    "typescript": "~4.3.5",
+    "vue-tsc": "^0.2.2"
+  }
+}
diff --git a/playground/typescript/public/favicon.ico b/playground/typescript/public/favicon.ico
new file mode 100644
index 00000000..df36fcfb
Binary files /dev/null and b/playground/typescript/public/favicon.ico differ
diff --git a/playground/default-ts/src/App.vue b/playground/typescript/src/App.vue
similarity index 100%
rename from playground/default-ts/src/App.vue
rename to playground/typescript/src/App.vue
diff --git a/playground/typescript/src/assets/logo.png b/playground/typescript/src/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/playground/typescript/src/assets/logo.png differ
diff --git a/playground/typescript/src/components/HelloWorld.vue b/playground/typescript/src/components/HelloWorld.vue
new file mode 100644
index 00000000..97b3d3da
--- /dev/null
+++ b/playground/typescript/src/components/HelloWorld.vue
@@ -0,0 +1,54 @@
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Docs
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  msg: String
+}>()
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>
diff --git a/playground/default-ts/src/main.ts b/playground/typescript/src/main.ts
similarity index 100%
rename from playground/default-ts/src/main.ts
rename to playground/typescript/src/main.ts
diff --git a/playground/typescript/tsconfig.json b/playground/typescript/tsconfig.json
new file mode 100644
index 00000000..6f98acfa
--- /dev/null
+++ b/playground/typescript/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/**"]
+}
diff --git a/playground/typescript/vite-env.d.ts b/playground/typescript/vite-env.d.ts
new file mode 100644
index 00000000..636d9c3f
--- /dev/null
+++ b/playground/typescript/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/playground/typescript/vite.config.ts b/playground/typescript/vite.config.ts
new file mode 100644
index 00000000..24c2e504
--- /dev/null
+++ b/playground/typescript/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@/': new URL('./src/', import.meta.url).pathname
+    }
+  }
+})
diff --git a/playground/vuex-with-tests/.gitignore b/playground/vuex-with-tests/.gitignore
new file mode 100644
index 00000000..133da84e
--- /dev/null
+++ b/playground/vuex-with-tests/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/playground/vuex-with-tests/README.md b/playground/vuex-with-tests/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/vuex-with-tests/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/spa-with-tests/cypress.json b/playground/vuex-with-tests/cypress.json
similarity index 100%
rename from playground/spa-with-tests/cypress.json
rename to playground/vuex-with-tests/cypress.json
diff --git a/playground/spa-with-tests/cypress/fixtures/example.json b/playground/vuex-with-tests/cypress/fixtures/example.json
similarity index 100%
rename from playground/spa-with-tests/cypress/fixtures/example.json
rename to playground/vuex-with-tests/cypress/fixtures/example.json
diff --git a/playground/default-with-tests/cypress/integration/example.spec.js b/playground/vuex-with-tests/cypress/integration/example.spec.js
similarity index 100%
rename from playground/default-with-tests/cypress/integration/example.spec.js
rename to playground/vuex-with-tests/cypress/integration/example.spec.js
diff --git a/playground/spa-ts-with-tests/cypress/tsconfig.json b/playground/vuex-with-tests/cypress/jsconfig.json
similarity index 100%
rename from playground/spa-ts-with-tests/cypress/tsconfig.json
rename to playground/vuex-with-tests/cypress/jsconfig.json
diff --git a/playground/spa-ts-with-tests/cypress/plugins/index.ts b/playground/vuex-with-tests/cypress/plugins/index.js
similarity index 100%
rename from playground/spa-ts-with-tests/cypress/plugins/index.ts
rename to playground/vuex-with-tests/cypress/plugins/index.js
diff --git a/playground/spa-ts-with-tests/cypress/support/commands.ts b/playground/vuex-with-tests/cypress/support/commands.js
similarity index 100%
rename from playground/spa-ts-with-tests/cypress/support/commands.ts
rename to playground/vuex-with-tests/cypress/support/commands.js
diff --git a/playground/spa-ts-with-tests/cypress/support/index.ts b/playground/vuex-with-tests/cypress/support/index.js
similarity index 100%
rename from playground/spa-ts-with-tests/cypress/support/index.ts
rename to playground/vuex-with-tests/cypress/support/index.js
diff --git a/playground/vuex-with-tests/index.html b/playground/vuex-with-tests/index.html
new file mode 100644
index 00000000..11603f87
--- /dev/null
+++ b/playground/vuex-with-tests/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/playground/vuex-with-tests/jsconfig.json b/playground/vuex-with-tests/jsconfig.json
new file mode 100644
index 00000000..6f98acfa
--- /dev/null
+++ b/playground/vuex-with-tests/jsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/**"]
+}
diff --git a/playground/vuex-with-tests/package.json b/playground/vuex-with-tests/package.json
new file mode 100644
index 00000000..267dec69
--- /dev/null
+++ b/playground/vuex-with-tests/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "vuex-with-tests",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preserve": "vite build",
+    "serve": "vite preview --port 5050",
+    "test:unit": "cypress open-ct",
+    "test:unit:ci": "cypress run-ct --quiet --reporter spec",
+    "test:e2e": "start-server-and-test serve 5050 'cypress open'",
+    "test:e2e:ci": "start-server-and-test serve 5050 'cypress run'"
+  },
+  "dependencies": {
+    "vue": "^3.1.5",
+    "vuex": "^4.0.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.2.5",
+    "@vue/compiler-sfc": "^3.1.5",
+    "vite": "^2.4.3",
+    "@cypress/vite-dev-server": "^2.0.2",
+    "@cypress/vue": "^3.0.1",
+    "cypress": "^8.0.0",
+    "start-server-and-test": "^1.12.6"
+  }
+}
diff --git a/playground/vuex-with-tests/public/favicon.ico b/playground/vuex-with-tests/public/favicon.ico
new file mode 100644
index 00000000..df36fcfb
Binary files /dev/null and b/playground/vuex-with-tests/public/favicon.ico differ
diff --git a/playground/vuex-with-tests/src/App.vue b/playground/vuex-with-tests/src/App.vue
new file mode 100644
index 00000000..a058d171
--- /dev/null
+++ b/playground/vuex-with-tests/src/App.vue
@@ -0,0 +1,22 @@
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+
+// This starter template is using Vue 3 experimental <script setup> SFCs
+// Check out https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/playground/vuex-with-tests/src/assets/logo.png b/playground/vuex-with-tests/src/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/playground/vuex-with-tests/src/assets/logo.png differ
diff --git a/playground/vuex-with-tests/src/components/HelloWorld.vue b/playground/vuex-with-tests/src/components/HelloWorld.vue
new file mode 100644
index 00000000..36a089f1
--- /dev/null
+++ b/playground/vuex-with-tests/src/components/HelloWorld.vue
@@ -0,0 +1,38 @@
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Documentation
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+  </p>
+
+  <button type="button" @click="state.count++">
+    count is: {{ state.count }}
+  </button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>
diff --git a/playground/spa-ts-with-tests/src/components/__tests__/HelloWorld.spec.ts b/playground/vuex-with-tests/src/components/__tests__/HelloWorld.spec.js
similarity index 100%
rename from playground/spa-ts-with-tests/src/components/__tests__/HelloWorld.spec.ts
rename to playground/vuex-with-tests/src/components/__tests__/HelloWorld.spec.js
diff --git a/playground/vuex-with-tests/src/main.js b/playground/vuex-with-tests/src/main.js
new file mode 100644
index 00000000..020a706b
--- /dev/null
+++ b/playground/vuex-with-tests/src/main.js
@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import store from './store'
+
+const app = createApp(App)
+
+app.use(store)
+
+app.mount('#app')
diff --git a/playground/vuex-with-tests/src/store/index.js b/playground/vuex-with-tests/src/store/index.js
new file mode 100644
index 00000000..2b9da8fe
--- /dev/null
+++ b/playground/vuex-with-tests/src/store/index.js
@@ -0,0 +1,8 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {}
+})
diff --git a/playground/vuex-with-tests/vite-env.d.ts b/playground/vuex-with-tests/vite-env.d.ts
new file mode 100644
index 00000000..636d9c3f
--- /dev/null
+++ b/playground/vuex-with-tests/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/playground/vuex-with-tests/vite.config.js b/playground/vuex-with-tests/vite.config.js
new file mode 100644
index 00000000..24c2e504
--- /dev/null
+++ b/playground/vuex-with-tests/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@/': new URL('./src/', import.meta.url).pathname
+    }
+  }
+})
diff --git a/playground/vuex/.gitignore b/playground/vuex/.gitignore
new file mode 100644
index 00000000..133da84e
--- /dev/null
+++ b/playground/vuex/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/playground/vuex/README.md b/playground/vuex/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/vuex/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/vuex/index.html b/playground/vuex/index.html
new file mode 100644
index 00000000..11603f87
--- /dev/null
+++ b/playground/vuex/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/playground/vuex/jsconfig.json b/playground/vuex/jsconfig.json
new file mode 100644
index 00000000..6f98acfa
--- /dev/null
+++ b/playground/vuex/jsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/**"]
+}
diff --git a/playground/vuex/package.json b/playground/vuex/package.json
new file mode 100644
index 00000000..49ebcaad
--- /dev/null
+++ b/playground/vuex/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "vuex",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preserve": "vite build",
+    "serve": "vite preview --port 5050"
+  },
+  "dependencies": {
+    "vue": "^3.1.5",
+    "vuex": "^4.0.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.2.5",
+    "@vue/compiler-sfc": "^3.1.5",
+    "vite": "^2.4.3"
+  }
+}
diff --git a/playground/vuex/public/favicon.ico b/playground/vuex/public/favicon.ico
new file mode 100644
index 00000000..df36fcfb
Binary files /dev/null and b/playground/vuex/public/favicon.ico differ
diff --git a/playground/vuex/src/App.vue b/playground/vuex/src/App.vue
new file mode 100644
index 00000000..a058d171
--- /dev/null
+++ b/playground/vuex/src/App.vue
@@ -0,0 +1,22 @@
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+
+// This starter template is using Vue 3 experimental <script setup> SFCs
+// Check out https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/playground/vuex/src/assets/logo.png b/playground/vuex/src/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/playground/vuex/src/assets/logo.png differ
diff --git a/playground/vuex/src/components/HelloWorld.vue b/playground/vuex/src/components/HelloWorld.vue
new file mode 100644
index 00000000..36a089f1
--- /dev/null
+++ b/playground/vuex/src/components/HelloWorld.vue
@@ -0,0 +1,38 @@
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Documentation
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+  </p>
+
+  <button type="button" @click="state.count++">
+    count is: {{ state.count }}
+  </button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>
diff --git a/playground/vuex/src/main.js b/playground/vuex/src/main.js
new file mode 100644
index 00000000..020a706b
--- /dev/null
+++ b/playground/vuex/src/main.js
@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import store from './store'
+
+const app = createApp(App)
+
+app.use(store)
+
+app.mount('#app')
diff --git a/playground/vuex/src/store/index.js b/playground/vuex/src/store/index.js
new file mode 100644
index 00000000..2b9da8fe
--- /dev/null
+++ b/playground/vuex/src/store/index.js
@@ -0,0 +1,8 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {}
+})
diff --git a/playground/vuex/vite-env.d.ts b/playground/vuex/vite-env.d.ts
new file mode 100644
index 00000000..636d9c3f
--- /dev/null
+++ b/playground/vuex/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/playground/vuex/vite.config.js b/playground/vuex/vite.config.js
new file mode 100644
index 00000000..24c2e504
--- /dev/null
+++ b/playground/vuex/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@/': new URL('./src/', import.meta.url).pathname
+    }
+  }
+})
diff --git a/playground/with-tests/.gitignore b/playground/with-tests/.gitignore
new file mode 100644
index 00000000..133da84e
--- /dev/null
+++ b/playground/with-tests/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/playground/with-tests/README.md b/playground/with-tests/README.md
new file mode 100644
index 00000000..c3a42c19
--- /dev/null
+++ b/playground/with-tests/README.md
@@ -0,0 +1,21 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Usage
+
+<!-- NPM-SCRIPTS-PLACEHOLDER -->
diff --git a/playground/with-tests/cypress.json b/playground/with-tests/cypress.json
new file mode 100644
index 00000000..3d372252
--- /dev/null
+++ b/playground/with-tests/cypress.json
@@ -0,0 +1,7 @@
+{
+  "baseUrl": "http://localhost:5050",
+  "component": {
+    "componentFolder": "src",
+    "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}"
+  }
+}
diff --git a/playground/with-tests/cypress/fixtures/example.json b/playground/with-tests/cypress/fixtures/example.json
new file mode 100644
index 00000000..02e42543
--- /dev/null
+++ b/playground/with-tests/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/playground/default-ts-with-tests/cypress/integration/example.spec.ts b/playground/with-tests/cypress/integration/example.spec.js
similarity index 72%
rename from playground/default-ts-with-tests/cypress/integration/example.spec.ts
rename to playground/with-tests/cypress/integration/example.spec.js
index bbe8f52d..493bfcf0 100644
--- a/playground/default-ts-with-tests/cypress/integration/example.spec.ts
+++ b/playground/with-tests/cypress/integration/example.spec.js
@@ -3,6 +3,6 @@
 describe('My First Test', () => {
   it('visits the app root url', () => {
     cy.visit('/')
-    cy.contains('h1', 'Hello Vue 3 + TypeScript + Vite')
+    cy.contains('h1', 'Hello Vue 3 + Vite')
   })
 })
diff --git a/playground/with-tests/cypress/jsconfig.json b/playground/with-tests/cypress/jsconfig.json
new file mode 100644
index 00000000..b5b2f972
--- /dev/null
+++ b/playground/with-tests/cypress/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  },
+  "include": ["./**/*"]
+}
diff --git a/playground/with-tests/cypress/plugins/index.js b/playground/with-tests/cypress/plugins/index.js
new file mode 100644
index 00000000..ad2e351d
--- /dev/null
+++ b/playground/with-tests/cypress/plugins/index.js
@@ -0,0 +1,28 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { startDevServer } = require('@cypress/vite-dev-server')
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  on('dev-server:start', (options) => {
+    return startDevServer({ options })
+  })
+  return config
+}
diff --git a/playground/with-tests/cypress/support/commands.js b/playground/with-tests/cypress/support/commands.js
new file mode 100644
index 00000000..119ab03f
--- /dev/null
+++ b/playground/with-tests/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/playground/with-tests/cypress/support/index.js b/playground/with-tests/cypress/support/index.js
new file mode 100644
index 00000000..d68db96d
--- /dev/null
+++ b/playground/with-tests/cypress/support/index.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// 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
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/playground/with-tests/index.html b/playground/with-tests/index.html
new file mode 100644
index 00000000..11603f87
--- /dev/null
+++ b/playground/with-tests/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/playground/with-tests/jsconfig.json b/playground/with-tests/jsconfig.json
new file mode 100644
index 00000000..6f98acfa
--- /dev/null
+++ b/playground/with-tests/jsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/**"]
+}
diff --git a/playground/default-with-tests/package.json b/playground/with-tests/package.json
similarity index 90%
rename from playground/default-with-tests/package.json
rename to playground/with-tests/package.json
index c95e46c7..9f52650e 100644
--- a/playground/default-with-tests/package.json
+++ b/playground/with-tests/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "default-with-tests",
+  "name": "with-tests",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
@@ -16,7 +16,6 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.2.5",
-    "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.1.5",
     "vite": "^2.4.3",
     "@cypress/vite-dev-server": "^2.0.2",
diff --git a/playground/with-tests/public/favicon.ico b/playground/with-tests/public/favicon.ico
new file mode 100644
index 00000000..df36fcfb
Binary files /dev/null and b/playground/with-tests/public/favicon.ico differ
diff --git a/playground/with-tests/src/App.vue b/playground/with-tests/src/App.vue
new file mode 100644
index 00000000..a058d171
--- /dev/null
+++ b/playground/with-tests/src/App.vue
@@ -0,0 +1,22 @@
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+
+// This starter template is using Vue 3 experimental <script setup> SFCs
+// Check out https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/playground/with-tests/src/assets/logo.png b/playground/with-tests/src/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/playground/with-tests/src/assets/logo.png differ
diff --git a/playground/with-tests/src/components/HelloWorld.vue b/playground/with-tests/src/components/HelloWorld.vue
new file mode 100644
index 00000000..36a089f1
--- /dev/null
+++ b/playground/with-tests/src/components/HelloWorld.vue
@@ -0,0 +1,38 @@
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Documentation
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+  </p>
+
+  <button type="button" @click="state.count++">
+    count is: {{ state.count }}
+  </button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>
diff --git a/playground/with-tests/src/components/__tests__/HelloWorld.spec.js b/playground/with-tests/src/components/__tests__/HelloWorld.spec.js
new file mode 100644
index 00000000..087c9561
--- /dev/null
+++ b/playground/with-tests/src/components/__tests__/HelloWorld.spec.js
@@ -0,0 +1,22 @@
+import { mount } from '@cypress/vue'
+import HelloWorld from '../HelloWorld.vue'
+
+describe('HelloWorld', () => {
+  it('playground', () => {
+    mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+  })
+
+  it('renders properly', () => {
+    mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+    cy.get('h1').should('contain', 'Hello Cypress')
+  })
+
+  it('adds 1 when clicking the plus button', () => {
+    mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+    
+    cy.get('button')
+      .should('contain', '0')
+      .click()
+      .should('contain', '1')
+  })
+})
diff --git a/playground/with-tests/src/main.js b/playground/with-tests/src/main.js
new file mode 100644
index 00000000..01433bca
--- /dev/null
+++ b/playground/with-tests/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/playground/with-tests/vite-env.d.ts b/playground/with-tests/vite-env.d.ts
new file mode 100644
index 00000000..636d9c3f
--- /dev/null
+++ b/playground/with-tests/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/playground/with-tests/vite.config.js b/playground/with-tests/vite.config.js
new file mode 100644
index 00000000..24c2e504
--- /dev/null
+++ b/playground/with-tests/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@/': new URL('./src/', import.meta.url).pathname
+    }
+  }
+})
diff --git a/snapshot.js b/snapshot.js
index 06952187..aa65b034 100644
--- a/snapshot.js
+++ b/snapshot.js
@@ -1,17 +1,48 @@
-import templateList from './utils/templateList.js'
 import { spawnSync } from 'child_process'
 
-for (const template of templateList) {
+const bin = new URL('./index.js', import.meta.url).pathname
+const playgroundDir = new URL('./playground/', import.meta.url).pathname
+
+function createProjectWithFeatureFlags(flags) {
+  const projectName = flags.join('-')
+  console.log(`Creating project ${projectName}`)
   spawnSync(
     'node',
     [
-      new URL('./index.js', import.meta.url).pathname,
-      template,
-      '--template',
-      template
+      bin,
+      projectName,
+      ...flags.map(flag => `--${flag}`)
     ],
     {
-      cwd: new URL('./playground/', import.meta.url).pathname
+      cwd: playgroundDir
     }
   )
 }
+
+const featureFlags = [
+  'typescript',
+  'jsx',
+  'router',
+  'vuex',
+  'with-tests'
+]
+
+function getCombinations(arr) {
+  const combinations = []
+
+  for (let i = 0; i < arr.length; i++) {
+    for (let j = i; j < arr.length; j++) {
+      const combination = arr.slice(i, j + 1)
+      combinations.push(combination)
+    }
+  }
+
+  return combinations
+}
+
+const flagCombinations = getCombinations(featureFlags)
+flagCombinations.push(['default'])
+
+for (const flags of flagCombinations) {
+  createProjectWithFeatureFlags(flags)
+}
diff --git a/utils/templateList.js b/utils/templateList.js
deleted file mode 100644
index 60fe1cd0..00000000
--- a/utils/templateList.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const templateList = ['default', 'spa']
-  .flatMap((x) => [x, x + '-ts'])
-  .flatMap((x) => [x, x + '-with-tests'])
-
-export default templateList