create-vue 3.3.4 → 3.4.0

package/LICENSE

@@ -150,7 +150,7 @@ Repository: git+https://github.com/marvinhagemeister/kolorist.git
 
 License: MIT
 By: James Halliday
-Repository: git://github.com/substack/minimist.git
+Repository: git://github.com/minimistjs/minimist.git
 
 > This software is released under the MIT license:
 >

package/README.md

@@ -9,13 +9,13 @@ The recommended way to start a Vite-powered Vue project
 ## Usage
 
 ```sh
-npm init vue@3
+npm create vue@3
 ```
 
 Or, if you need to support IE11, you can create a Vue 2 project with:
 
 ```sh
-npm init vue@2
+npm create vue@2
 ```
 
 Note that the version number (`@3` or `@2`) MUST NOT be omitted, otherwise `npm` may resolve to a cached and outdated version of the package.

package/outfile.cjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/*! create-vue v3.3.4 | MIT */
+/*! create-vue v3.4.0 | MIT */
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,9 +30,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// node_modules/.pnpm/minimist@1.2.6/node_modules/minimist/index.js
+// node_modules/.pnpm/minimist@1.2.7/node_modules/minimist/index.js
 var require_minimist = __commonJS({
-  "node_modules/.pnpm/minimist@1.2.6/node_modules/minimist/index.js"(exports, module2) {
+  "node_modules/.pnpm/minimist@1.2.7/node_modules/minimist/index.js"(exports, module2) {
     module2.exports = function(args, opts) {
       if (!opts)
         opts = {};
@@ -3325,7 +3325,7 @@ var path4 = __toESM(require("path"), 1);
 var import_minimist = __toESM(require_minimist(), 1);
 var import_prompts = __toESM(require_lib(), 1);
 
-// node_modules/.pnpm/kolorist@1.5.1/node_modules/kolorist/dist/esm/index.mjs
+// node_modules/.pnpm/kolorist@1.6.0/node_modules/kolorist/dist/esm/index.mjs
 var enabled = true;
 var globalVar = typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {};
 var supportLevel = 0;
@@ -3472,6 +3472,12 @@ function renderTemplate(src, dest) {
   if (filename.startsWith("_")) {
     dest = path.resolve(path.dirname(dest), filename.replace(/^_/, "."));
   }
+  if (filename === "_gitignore" && fs.existsSync(dest)) {
+    const existing = fs.readFileSync(dest, "utf8");
+    const newGitignore = fs.readFileSync(src, "utf8");
+    fs.writeFileSync(dest, existing + "\n" + newGitignore);
+    return;
+  }
   fs.copyFileSync(src, dest);
 }
 var renderTemplate_default = renderTemplate;
@@ -3511,11 +3517,15 @@ function postOrderDirectoryTraverse(dir, dirCallback, fileCallback) {
 }
 
 // utils/getCommand.ts
-function getCommand(packageManager, scriptName) {
+function getCommand(packageManager, scriptName, args) {
   if (scriptName === "install") {
     return packageManager === "yarn" ? "yarn" : `${packageManager} install`;
   }
-  return packageManager === "npm" ? `npm run ${scriptName}` : `${packageManager} ${scriptName}`;
+  if (args) {
+    return packageManager === "npm" ? `npm run ${scriptName} -- ${args}` : `${packageManager} ${scriptName} ${args}`;
+  } else {
+    return packageManager === "npm" ? `npm run ${scriptName}` : `${packageManager} ${scriptName}`;
+  }
 }
 
 // utils/generateReadme.ts
@@ -3539,9 +3549,11 @@ function generateReadme({
   needsTypeScript,
   needsCypress,
   needsCypressCT,
+  needsPlaywright,
   needsVitest,
   needsEslint
 }) {
+  const commandFor = (scriptName, args) => getCommand(packageManager, scriptName, args);
   let readme = `# ${projectName}
 
 This template should help get you started developing with Vue 3 in Vite.
@@ -3558,19 +3570,19 @@ See [Vite Configuration Reference](https://vitejs.dev/config/).
 
 `;
   let npmScriptsDescriptions = `\`\`\`sh
-${getCommand(packageManager, "install")}
+${commandFor("install")}
 \`\`\`
 
 ### Compile and Hot-Reload for Development
 
 \`\`\`sh
-${getCommand(packageManager, "dev")}
+${commandFor("dev")}
 \`\`\`
 
 ### ${needsTypeScript ? "Type-Check, " : ""}Compile and Minify for Production
 
 \`\`\`sh
-${getCommand(packageManager, "build")}
+${commandFor("build")}
 \`\`\`
 `;
   if (needsVitest) {
@@ -3578,7 +3590,7 @@ ${getCommand(packageManager, "build")}
 ### Run Unit Tests with [Vitest](https://vitest.dev/)
 
 \`\`\`sh
-${getCommand(packageManager, "test:unit")}
+${commandFor("test:unit")}
 \`\`\`
 `;
   }
@@ -3587,10 +3599,7 @@ ${getCommand(packageManager, "test:unit")}
 ### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component)
 
 \`\`\`sh
-${getCommand(packageManager, "test:unit")} # or \`${getCommand(
-      packageManager,
-      "test:unit:ci"
-    )}\` for headless testing
+${commandFor("test:unit:dev")} # or \`${commandFor("test:unit")}\` for headless testing
 \`\`\`
 `;
   }
@@ -3599,11 +3608,39 @@ ${getCommand(packageManager, "test:unit")} # or \`${getCommand(
 ### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
 
 \`\`\`sh
-${getCommand(packageManager, "build")}
-${getCommand(packageManager, "test:e2e")} # or \`${getCommand(
-      packageManager,
-      "test:e2e:ci"
-    )}\` for headless testing
+${commandFor("test:e2e:dev")}
+\`\`\`
+
+This runs the end-to-end tests against the Vite development server.
+It is much faster than the production build.
+
+But it's still recommended to test the production build with \`test:e2e\` before deploying (e.g. in CI environments):
+
+\`\`\`sh
+${commandFor("build")}
+${commandFor("test:e2e")}
+\`\`\`
+`;
+  }
+  if (needsPlaywright) {
+    npmScriptsDescriptions += `
+### Run End-to-End Tests with [Playwright](https://playwright.dev)
+
+\`\`\`sh
+# Install browsers for the first run
+npx playwright install
+
+# When testing on CI, must build the project first
+${commandFor("build")}
+
+# Runs the end-to-end tests
+${commandFor("test:e2e")}
+# Runs the tests only on Chromium
+${commandFor("test:e2e", "--project=chromium")}
+# Runs the tests of a specific file
+${commandFor("test:e2e", "tests/example.spec.ts")}
+# Runs the tests in debug mode
+${commandFor("test:e2e", "--debug")}
 \`\`\`
 `;
   }
@@ -3612,7 +3649,7 @@ ${getCommand(packageManager, "test:e2e")} # or \`${getCommand(
 ### Lint with [ESLint](https://eslint.org/)
 
 \`\`\`sh
-${getCommand(packageManager, "lint")}
+${commandFor("lint")}
 \`\`\`
 `;
   }
@@ -3776,7 +3813,10 @@ function renderEslint(rootDir, { needsTypeScript, needsCypress, needsCypressCT,
   if (needsCypress) {
     additionalConfig.overrides = [
       {
-        files: needsCypressCT ? ["**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}", "cypress/e2e/**.{cy,spec}.{js,ts,jsx,tsx}"] : ["cypress/e2e/**.{cy,spec}.{js,ts,jsx,tsx}"],
+        files: needsCypressCT ? [
+          "**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}",
+          "cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}"
+        ] : ["cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}"],
         extends: ["plugin:cypress/recommended"]
       }
     ];
@@ -3853,7 +3893,7 @@ ${banner_default}
     },
     boolean: true
   });
-  const isFeatureFlagsUsed = typeof (argv.default ?? argv.ts ?? argv.jsx ?? argv.router ?? argv.pinia ?? argv.tests ?? argv.vitest ?? argv.cypress ?? argv.eslint) === "boolean";
+  const isFeatureFlagsUsed = typeof (argv.default ?? argv.ts ?? argv.jsx ?? argv.router ?? argv.pinia ?? argv.tests ?? argv.vitest ?? argv.cypress ?? argv.playwright ?? argv.eslint) === "boolean";
   let targetDir = argv._[0];
   const defaultProjectName = !targetDir ? "vue-project" : targetDir;
   const forceOverwrite = argv.force;
@@ -3933,12 +3973,22 @@ ${banner_default}
           inactive: "No"
         },
         {
-          name: "needsCypress",
-          type: () => isFeatureFlagsUsed ? null : "toggle",
-          message: (prev, answers) => answers.needsVitest ? "Add Cypress for End-to-End testing?" : "Add Cypress for both Unit and End-to-End testing?",
-          initial: false,
-          active: "Yes",
-          inactive: "No"
+          name: "needsE2eTesting",
+          type: () => isFeatureFlagsUsed ? null : "select",
+          message: "Add an End-to-End Testing Solution?",
+          initial: 0,
+          choices: (prev, anwsers) => [
+            { title: "No", value: false },
+            {
+              title: "Cypress",
+              description: anwsers.needsVitest ? void 0 : "also supports unit testing with Cypress Component Testing",
+              value: "cypress"
+            },
+            {
+              title: "Playwright",
+              value: "playwright"
+            }
+          ]
         },
         {
           name: "needsEslint",
@@ -3980,12 +4030,14 @@ ${banner_default}
     needsTypeScript = argv.typescript,
     needsRouter = argv.router,
     needsPinia = argv.pinia,
-    needsCypress = argv.cypress || argv.tests,
     needsVitest = argv.vitest || argv.tests,
     needsEslint = argv.eslint || argv["eslint-with-prettier"],
     needsPrettier = argv["eslint-with-prettier"]
   } = result;
+  const { needsE2eTesting } = result;
+  const needsCypress = argv.cypress || argv.tests || needsE2eTesting === "cypress";
   const needsCypressCT = needsCypress && !needsVitest;
+  const needsPlaywright = argv.playwright || needsE2eTesting === "playwright";
   const root = path4.join(cwd, targetDir);
   if (fs4.existsSync(root) && shouldOverwrite) {
     emptyDir(root);
@@ -4020,6 +4072,9 @@ Scaffolding project in ${root}...`);
   if (needsCypressCT) {
     render("config/cypress-ct");
   }
+  if (needsPlaywright) {
+    render("config/playwright");
+  }
   if (needsTypeScript) {
     render("config/typescript");
     render("tsconfig/base");
@@ -4090,6 +4145,7 @@ Scaffolding project in ${root}...`);
       needsTypeScript,
       needsVitest,
       needsCypress,
+      needsPlaywright,
       needsCypressCT,
       needsEslint
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vue",
-  "version": "3.3.4",
+  "version": "3.4.0",
   "description": "An easy way to start a Vue project",
   "type": "module",
   "bin": {
@@ -25,16 +25,17 @@
   },
   "homepage": "https://github.com/vuejs/create-vue#readme",
   "devDependencies": {
-    "@types/eslint": "^8.4.6",
-    "@types/prompts": "^2.0.14",
+    "@types/eslint": "^8.4.7",
+    "@types/node": "^16.11.68",
+    "@types/prompts": "^2.4.1",
     "@vue/create-eslint-config": "^0.1.3",
     "@vue/tsconfig": "^0.1.3",
     "esbuild": "^0.14.53",
     "esbuild-plugin-license": "^1.2.2",
     "husky": "^8.0.1",
-    "kolorist": "^1.5.1",
+    "kolorist": "^1.6.0",
     "lint-staged": "^13.0.3",
-    "minimist": "^1.2.6",
+    "minimist": "^1.2.7",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "prompts": "^2.4.2",

package/template/base/index.html

@@ -1,9 +1,9 @@
 <!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" />
+    <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>

package/template/base/node_modules/.bin/vite

@@ -11,7 +11,7 @@ else
   export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/create-vue/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/vite@3.0.9/node_modules/vite/bin/vite.js" "$@"
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/vite@3.1.8/node_modules/vite/bin/vite.js" "$@"
 else
-  exec node  "$basedir/../../../../node_modules/.pnpm/vite@3.0.9/node_modules/vite/bin/vite.js" "$@"
+  exec node  "$basedir/../../../../node_modules/.pnpm/vite@3.1.8/node_modules/vite/bin/vite.js" "$@"
 fi

package/template/base/package.json

@@ -2,13 +2,13 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview --port 4173"
+    "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.38"
+    "vue": "^3.2.41"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^3.0.3",
-    "vite": "^3.0.9"
+    "@vitejs/plugin-vue": "^3.1.2",
+    "vite": "^3.1.8"
   }
 }

package/template/base/src/assets/main.css

@@ -1,4 +1,4 @@
-@import "./base.css";
+@import './base.css';
 
 #app {
   max-width: 1280px;

package/template/code/router/src/components/WelcomeItem.vue

@@ -29,7 +29,6 @@ i {
   place-content: center;
   width: 32px;
   height: 32px;
-
   color: var(--color-text);
 }
 

package/template/config/cypress/node_modules/.bin/cypress

@@ -11,7 +11,7 @@ else
   export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/create-vue/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/cypress@10.7.0/node_modules/cypress/bin/cypress" "$@"
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/cypress@10.10.0/node_modules/cypress/bin/cypress" "$@"
 else
-  exec node  "$basedir/../../../../../node_modules/.pnpm/cypress@10.7.0/node_modules/cypress/bin/cypress" "$@"
+  exec node  "$basedir/../../../../../node_modules/.pnpm/cypress@10.10.0/node_modules/cypress/bin/cypress" "$@"
 fi

package/template/config/cypress/package.json

@@ -1,10 +1,10 @@
 {
   "scripts": {
-    "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'",
-    "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'"
+    "test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'"
   },
   "devDependencies": {
-    "cypress": "^10.7.0",
+    "cypress": "^10.10.0",
     "start-server-and-test": "^1.14.0"
   }
 }

package/template/config/cypress-ct/node_modules/.bin/cypress

@@ -11,7 +11,7 @@ else
   export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/create-vue/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/cypress@10.7.0/node_modules/cypress/bin/cypress" "$@"
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/cypress@10.10.0/node_modules/cypress/bin/cypress" "$@"
 else
-  exec node  "$basedir/../../../../../node_modules/.pnpm/cypress@10.7.0/node_modules/cypress/bin/cypress" "$@"
+  exec node  "$basedir/../../../../../node_modules/.pnpm/cypress@10.10.0/node_modules/cypress/bin/cypress" "$@"
 fi

package/template/config/cypress-ct/package.json

@@ -1,12 +1,12 @@
 {
   "scripts": {
-    "test:unit": "cypress open --component",
-    "test:unit:ci": "cypress run --component --quiet --reporter spec"
+    "test:unit": "cypress run --component",
+    "test:unit:dev": "cypress open --component"
   },
   "dependencies": {
-    "vue": "^3.2.38"
+    "vue": "^3.2.41"
   },
   "devDependencies": {
-    "cypress": "^10.7.0"
+    "cypress": "^10.10.0"
   }
 }

package/template/config/jsx/node_modules/.bin/vite

@@ -11,7 +11,7 @@ else
   export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/create-vue/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/vite@3.0.9/node_modules/vite/bin/vite.js" "$@"
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/vite@3.1.8/node_modules/vite/bin/vite.js" "$@"
 else
-  exec node  "$basedir/../../../../../node_modules/.pnpm/vite@3.0.9/node_modules/vite/bin/vite.js" "$@"
+  exec node  "$basedir/../../../../../node_modules/.pnpm/vite@3.1.8/node_modules/vite/bin/vite.js" "$@"
 fi

package/template/config/jsx/package.json

@@ -1,9 +1,9 @@
 {
   "dependencies": {
-    "vue": "^3.2.38"
+    "vue": "^3.2.41"
   },
   "devDependencies": {
     "@vitejs/plugin-vue-jsx": "^2.0.1",
-    "vite": "^3.0.9"
+    "vite": "^3.1.8"
   }
 }

package/template/config/pinia/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "pinia": "^2.0.21",
-    "vue": "^3.2.38"
+    "pinia": "^2.0.23",
+    "vue": "^3.2.41"
   }
 }

package/template/config/playwright/_gitignore

@@ -0,0 +1,2 @@
+test-results/
+playwright-report/

package/template/config/playwright/e2e/vue.spec.js

@@ -0,0 +1,8 @@
+const { test, expect } = require('@playwright/test');
+
+// See here how to get started:
+// https://playwright.dev/docs/intro
+test('visits the app root url', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('div.greetings > h1')).toHaveText('You did it!');
+})

package/template/config/playwright/e2e/vue.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+// See here how to get started:
+// https://playwright.dev/docs/intro
+test('visits the app root url', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('div.greetings > h1')).toHaveText('You did it!');
+})

package/template/config/playwright/node_modules/.bin/playwright

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/haoqun/Developer/vuejs/create-vue/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/create-vue/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/@playwright+test@1.27.1/node_modules/@playwright/test/cli.js" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/@playwright+test@1.27.1/node_modules/@playwright/test/cli.js" "$@"
+fi

package/template/config/playwright/package.json

@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "test:e2e": "playwright test"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.27.1"
+  }
+}

package/template/config/playwright/playwright.config.js

@@ -0,0 +1,112 @@
+// @ts-check
+const { devices } = require('@playwright/test')
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ * @type {import('@playwright/test').PlaywrightTestConfig}
+ */
+const config = {
+  testDir: './e2e',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000
+  },
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:5173',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    /* Only on CI systems run the tests headless */
+    headless: !!process.env.CI
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome']
+      }
+    },
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox']
+      }
+    },
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari']
+      }
+    }
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    /**
+     * Use the dev server by default for faster feedback loop.
+     * Use the preview server on CI for more realistic testing.
+     */
+    command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
+    port: 5173,
+    reuseExistingServer: !process.env.CI
+  }
+}
+
+module.exports = config

package/template/config/playwright/playwright.config.ts

@@ -0,0 +1,112 @@
+import type { PlaywrightTestConfig } from '@playwright/test'
+import { devices } from '@playwright/test'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './e2e',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000
+  },
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:5173',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    /* Only on CI systems run the tests headless */
+    headless: !!process.env.CI
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome']
+      }
+    },
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox']
+      }
+    },
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari']
+      }
+    }
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    /**
+     * Use the dev server by default for faster feedback loop.
+     * Use the preview server on CI for more realistic testing.
+    Playwright will re-use the local server if there is already a dev-server running.
+     */
+    command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
+    port: 5173,
+    reuseExistingServer: !process.env.CI
+  }
+}
+
+export default config

package/template/config/router/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "vue": "^3.2.38",
+    "vue": "^3.2.41",
     "vue-router": "^4.1.5"
   }
 }

package/template/config/typescript/node_modules/.bin/vue-tsc

@@ -11,7 +11,7 @@ else
   export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/create-vue/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/vue-tsc@0.40.7_typescript@4.7.4/node_modules/vue-tsc/bin/vue-tsc.js" "$@"
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/vue-tsc@1.0.8_typescript@4.7.4/node_modules/vue-tsc/bin/vue-tsc.js" "$@"
 else
-  exec node  "$basedir/../../../../../node_modules/.pnpm/vue-tsc@0.40.7_typescript@4.7.4/node_modules/vue-tsc/bin/vue-tsc.js" "$@"
+  exec node  "$basedir/../../../../../node_modules/.pnpm/vue-tsc@1.0.8_typescript@4.7.4/node_modules/vue-tsc/bin/vue-tsc.js" "$@"
 fi

package/template/config/typescript/package.json

@@ -5,9 +5,9 @@
     "type-check": "vue-tsc --noEmit"
   },
   "devDependencies": {
-    "@types/node": "^16.11.56",
+    "@types/node": "^16.11.68",
     "npm-run-all": "^4.1.5",
     "typescript": "~4.7.4",
-    "vue-tsc": "^0.40.7"
+    "vue-tsc": "^1.0.8"
   }
 }

package/template/config/vitest/node_modules/.bin/vitest

@@ -11,7 +11,7 @@ else
   export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/create-vue/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/vitest@0.23.0_jsdom@20.0.0/node_modules/vitest/vitest.mjs" "$@"
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/vitest@0.24.3_jsdom@20.0.1/node_modules/vitest/vitest.mjs" "$@"
 else
-  exec node  "$basedir/../../../../../node_modules/.pnpm/vitest@0.23.0_jsdom@20.0.0/node_modules/vitest/vitest.mjs" "$@"
+  exec node  "$basedir/../../../../../node_modules/.pnpm/vitest@0.24.3_jsdom@20.0.1/node_modules/vitest/vitest.mjs" "$@"
 fi

package/template/config/vitest/package.json

@@ -1,13 +1,13 @@
 {
   "scripts": {
-    "test:unit": "vitest --environment jsdom"
+    "test:unit": "vitest --environment jsdom --root src/"
   },
   "dependencies": {
-    "vue": "^3.2.38"
+    "vue": "^3.2.41"
   },
   "devDependencies": {
-    "@vue/test-utils": "^2.0.2",
-    "jsdom": "^20.0.0",
-    "vitest": "^0.23.0"
+    "@vue/test-utils": "^2.1.0",
+    "jsdom": "^20.0.1",
+    "vitest": "^0.24.3"
   }
 }

package/template/tsconfig/base/tsconfig.config.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
   "compilerOptions": {
     "composite": true,
     "types": ["node"]