import prompts from 'prompts'
import { red, green, bold } from 'kolorist'
-import templateList from './utils/templateList.js'
import renderTemplate from './utils/renderTemplate.js'
import {
postOrderDirectoryTraverse,
async function init() {
const cwd = process.cwd()
// possible options:
+ // --default
// --typescript / --ts
// --jsx
// --router / --vue-router
// 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
+++ /dev/null
-/// <reference types="vite/client" />
+++ /dev/null
-/// <reference types="vite/client" />
+++ /dev/null
-/// <reference types="vite/client" />
+# 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 -->
"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__/**"]
}
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.2.5",
- "@vitejs/plugin-vue-jsx": "^1.1.6",
"@vue/compiler-sfc": "^3.1.5",
"vite": "^2.4.3"
}
+++ /dev/null
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />
+
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line
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
--- /dev/null
+# 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 -->
"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__/**"]
}
{
- "name": "spa-with-tests",
+ "name": "jsx-router-vuex-with-tests",
"version": "0.0.0",
"scripts": {
"dev": "vite",
},
"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",
+/// <reference types="vite/client" />
+
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line
--- /dev/null
+# 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 -->
"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__/**"]
}
--- /dev/null
+{
+ "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"
+ }
+}
+/// <reference types="vite/client" />
+
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line
--- /dev/null
+# 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 -->
"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__/**"]
}
--- /dev/null
+{
+ "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"
+ }
+}
--- /dev/null
+<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>
--- /dev/null
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')
--- /dev/null
+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
--- /dev/null
+<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>
+/// <reference types="vite/client" />
+
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line
--- /dev/null
+# 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 -->
--- /dev/null
+{
+ "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__/**"]
+}
--- /dev/null
+{
+ "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"
+ }
+}
--- /dev/null
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+# 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 -->
--- /dev/null
+// 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')
+ })
+})
--- /dev/null
+{
+ "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__/**"]
+}
{
- "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"
}
}
--- /dev/null
+<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>
--- /dev/null
+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
--- /dev/null
+<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>
--- /dev/null
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+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
+ }
+ }
+})
--- /dev/null
+# 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 -->
--- /dev/null
+{
+ "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__/**"]
+}
{
- "name": "spa",
+ "name": "router-vuex",
"version": "0.0.0",
"scripts": {
"dev": "vite",
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.2.5",
- "@vitejs/plugin-vue-jsx": "^1.1.6",
"@vue/compiler-sfc": "^3.1.5",
"vite": "^2.4.3"
}
--- /dev/null
+<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>
--- /dev/null
+<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>
--- /dev/null
+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
--- /dev/null
+<template>
+ <div class="about">
+ <h1>This is an about page</h1>
+ </div>
+</template>
--- /dev/null
+<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>
--- /dev/null
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+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
+ }
+ }
+})
--- /dev/null
+# 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 -->
--- /dev/null
+{
+ "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__/**"]
+}
--- /dev/null
+{
+ "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"
+ }
+}
--- /dev/null
+<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>
--- /dev/null
+<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>
--- /dev/null
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')
--- /dev/null
+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
--- /dev/null
+<template>
+ <div class="about">
+ <h1>This is an about page</h1>
+ </div>
+</template>
--- /dev/null
+<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>
--- /dev/null
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+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
+ }
+ }
+})
+++ /dev/null
-declare module '*.vue' {
- import { DefineComponent } from 'vue'
- // eslint-disable-next-line
- const component: DefineComponent<{}, {}, any>
- export default component
-}
+++ /dev/null
-/// <reference types="vite/client" />
+++ /dev/null
-declare module '*.vue' {
- import { DefineComponent } from 'vue'
- // eslint-disable-next-line
- const component: DefineComponent<{}, {}, any>
- export default component
-}
+++ /dev/null
-/// <reference types="vite/client" />
+++ /dev/null
-declare module '*.vue' {
- import { DefineComponent } from 'vue'
- // eslint-disable-next-line
- const component: DefineComponent<{}, {}, any>
- export default component
-}
+++ /dev/null
-/// <reference types="vite/client" />
+++ /dev/null
-declare module '*.vue' {
- import { DefineComponent } from 'vue'
- // eslint-disable-next-line
- const component: DefineComponent<{}, {}, any>
- export default component
-}
+++ /dev/null
-/// <reference types="vite/client" />
--- /dev/null
+# 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?
--- /dev/null
+# 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 -->
--- /dev/null
+<!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>
{
- "name": "spa-ts-with-tests",
+ "name": "typescript-jsx-router-vuex-with-tests",
"version": "0.0.0",
"scripts": {
"dev": "vite",
},
"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",
--- /dev/null
+<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>
--- /dev/null
+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')
--- /dev/null
+import { createStore } from 'vuex'
+
+export default createStore({
+ state: {},
+ mutations: {},
+ actions: {},
+ modules: {}
+})
--- /dev/null
+<template>
+ <div class="about">
+ <h1>This is an about page</h1>
+ </div>
+</template>
"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__/**"]
}
--- /dev/null
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+# 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?
--- /dev/null
+# 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 -->
--- /dev/null
+<!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>
{
- "name": "spa-ts",
+ "name": "typescript-jsx-router-vuex",
"version": "0.0.0",
"scripts": {
"dev": "vite",
},
"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"
}
--- /dev/null
+<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>
--- /dev/null
+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')
--- /dev/null
+import { createStore } from 'vuex'
+
+export default createStore({
+ state: {},
+ mutations: {},
+ actions: {},
+ modules: {}
+})
--- /dev/null
+<template>
+ <div class="about">
+ <h1>This is an about page</h1>
+ </div>
+</template>
"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__/**"]
}
--- /dev/null
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+# 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?
--- /dev/null
+# 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 -->
--- /dev/null
+<!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>
--- /dev/null
+{
+ "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"
+ }
+}
--- /dev/null
+<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>
--- /dev/null
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')
--- /dev/null
+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
--- /dev/null
+<template>
+ <div class="about">
+ <h1>This is an about page</h1>
+ </div>
+</template>
--- /dev/null
+<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>
"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__/**"]
}
--- /dev/null
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+# 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?
--- /dev/null
+# 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 -->
--- /dev/null
+<!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>
{
- "name": "default-ts",
+ "name": "typescript-jsx",
"version": "0.0.0",
"scripts": {
"dev": "vite",
},
"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"
}
"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__/**"]
}
--- /dev/null
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+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
+ }
+ }
+})
--- /dev/null
+# 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?
--- /dev/null
+# 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 -->
--- /dev/null
+<!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>
--- /dev/null
+{
+ "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"
+ }
+}
--- /dev/null
+<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>
--- /dev/null
+{
+ "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__/**"]
+}
--- /dev/null
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+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
+ }
+ }
+})
--- /dev/null
+# 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?
--- /dev/null
+# 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 -->
--- /dev/null
+<!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>
--- /dev/null
+{
+ "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__/**"]
+}
--- /dev/null
+{
+ "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"
+ }
+}
--- /dev/null
+<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>
--- /dev/null
+<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>
--- /dev/null
+import { createApp } from 'vue'
+import App from './App.vue'
+import store from './store'
+
+const app = createApp(App)
+
+app.use(store)
+
+app.mount('#app')
--- /dev/null
+import { createStore } from 'vuex'
+
+export default createStore({
+ state: {},
+ mutations: {},
+ actions: {},
+ modules: {}
+})
--- /dev/null
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+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
+ }
+ }
+})
--- /dev/null
+# 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?
--- /dev/null
+# 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 -->
--- /dev/null
+<!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>
--- /dev/null
+{
+ "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__/**"]
+}
--- /dev/null
+{
+ "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"
+ }
+}
--- /dev/null
+<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>
--- /dev/null
+<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>
--- /dev/null
+import { createApp } from 'vue'
+import App from './App.vue'
+import store from './store'
+
+const app = createApp(App)
+
+app.use(store)
+
+app.mount('#app')
--- /dev/null
+import { createStore } from 'vuex'
+
+export default createStore({
+ state: {},
+ mutations: {},
+ actions: {},
+ modules: {}
+})
--- /dev/null
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+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
+ }
+ }
+})
--- /dev/null
+# 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?
--- /dev/null
+# 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 -->
--- /dev/null
+{
+ "baseUrl": "http://localhost:5050",
+ "component": {
+ "componentFolder": "src",
+ "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}"
+ }
+}
--- /dev/null
+{
+ "name": "Using fixtures to represent data",
+ "email": "hello@cypress.io",
+ "body": "Fixtures are a great way to mock data for responses to routes"
+}
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')
})
})
--- /dev/null
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["es5", "dom"],
+ "types": ["cypress"]
+ },
+ "include": ["./**/*"]
+}
--- /dev/null
+/// <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
+}
--- /dev/null
+// ***********************************************
+// 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) => { ... })
--- /dev/null
+// ***********************************************************
+// 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')
--- /dev/null
+<!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>
--- /dev/null
+{
+ "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__/**"]
+}
{
- "name": "default-with-tests",
+ "name": "with-tests",
"version": "0.0.0",
"scripts": {
"dev": "vite",
},
"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",
--- /dev/null
+<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>
--- /dev/null
+<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>
--- /dev/null
+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')
+ })
+})
--- /dev/null
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
--- /dev/null
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ // eslint-disable-next-line
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
--- /dev/null
+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
+ }
+ }
+})
-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)
+}
+++ /dev/null
-const templateList = ['default', 'spa']
- .flatMap((x) => [x, x + '-ts'])
- .flatMap((x) => [x, x + '-with-tests'])
-
-export default templateList
projects / thirdparty / vuejs / create-vue.git / commitdiff
