Dec 23, 2024 · Dec 23, 2024 · Dec 23, 2024
diff --git a/README.md b/README.md
 > [!NOTE]
 > (`@latest` or `@legacy`) MUST NOT be omitted, otherwise `npm` may resolve to a cached and outdated version of the package.

 Or, if you need to support IE11, you can create a Vue 2 project with:
 By default the command will run in interactive mode, but you can also provide feature flags in the CLI arguments to skip the prompts. Run `npm create vue@latest --help` to see all available options.

 If you need to support IE11, you can create a Vue 2 project with:

 ```sh
 npm create vue@legacy
diff --git a/index.ts b/index.ts
 import { parseArgs } from 'node:util'

 import prompts from 'prompts'
 import { red, green, bold } from 'kleur/colors'
 import { red, green,cyan,bold } from 'kleur/colors'

 import ejs from 'ejs'

 import renderEslint from './utils/renderEslint'
 import trimBoilerplate from './utils/trimBoilerplate'

 import cliPackageJson from './package.json'

 function isValidPackageName(projectName) {
  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(projectName)
 }
  )
 }

 async function init() {
  console.log()
  console.log(
    process.stdout.isTTY && process.stdout.getColorDepth() > 8
      ? banners.gradientBanner
      : banners.defaultBanner,
  )
  console.log()
 const helpMessage = `\
 Usage: create-vue [FEATURE_FLGAS...] [OPTIONS...] [DIRECTORY]

 Create a new Vue.js project.
 Start the CLI in interactive mode when no FEATURE_FLAGS is provided, or if the DIRECTORY argument is not a valid package name.

 Options:
  --force
    Create the project even if the directory is not empty.
  --bare
    Create a barebone project without example code.
  --help
    Display this help message.
  --version
    Display the version number of this CLI.

 Available feature flags:
  --default
    Create a project with the default configuration without any additional features.
  --ts, --typescript
    Add TypeScript support.
  --jsx
    Add JSX support.
  --router, --vue-router
    Add Vue Router for SPA development.
  --pinia
    Add Pinia for state management.
  --vitest
    Add Vitest for unit testing.
  --cypress
    Add Cypress for end-to-end testing.
    If used without ${cyan('--vitest')}, it will also add Cypress Component Testing.
  --playwright
    Add Playwright for end-to-end testing.
  --nightwatch
    Add Nightwatch for end-to-end testing.
    If used without ${cyan('--vitest')}, it will also add Nightwatch Component Testing.
  --eslint
    Add ESLint for code quality.
  --eslint-with-prettier
    Add Prettier for code formatting in addition to ESLint.

 Unstable feature flags:
  --tests, --with-tests
    Add both unit testing and end-to-end testing support.
    Currently equivalent to ${cyan('--vitest --cypress')}, but may change in the future.
 `

 async function init() {
  const cwd = process.cwd()
  // possible options:
  // --default
  // --typescript / --ts
  // --jsx
  // --router / --vue-router
  // --pinia
  // --with-tests / --tests (equals to `--vitest --cypress`)
  // --vitest
  // --cypress
  // --nightwatch
  // --playwright
  // --eslint
  // --eslint-with-prettier (only support prettier through eslint for simplicity)
  // in addition to the feature flags, you can also pass the following options:
  // --bare (for a barebone template without example code)
  // --force (for force overwriting without confirming)

  const args = process.argv.slice(2)

  // alias is not supported by parseArgs
    strict: false,
  })

  if (argv.help) {
    console.log(helpMessage)
    process.exit(0)
  }

  if (argv.version) {
    console.log(`${cliPackageJson.name} v${cliPackageJson.version}`)
    process.exit(0)
  }

  // if any of the feature flags is set, we would skip the feature prompts
  const isFeatureFlagsUsed =
    typeof (
    needsPrettier?: boolean
  } = {}

  console.log()
  console.log(
    process.stdout.isTTY && process.stdout.getColorDepth() > 8
      ? banners.gradientBanner
      : banners.defaultBanner,
  )
  console.log()

  try {
    // Prompts:
    // - Project name:
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,7 +17,9 @@ npm create vue@latest
		> [!NOTE]
		> (`@latest` or `@legacy`) MUST NOT be omitted, otherwise `npm` may resolve to a cached and outdated version of the package.

		Or, if you need to support IE11, you can create a Vue 2 project with:
		By default the command will run in interactive mode, but you can also provide feature flags in the CLI arguments to skip the prompts. Run `npm create vue@latest --help` to see all available options.

		If you need to support IE11, you can create a Vue 2 project with:

		```sh
		npm create vue@legacy
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,7 +6,7 @@ import * as path from 'node:path'
		import { parseArgs } from 'node:util'

		import prompts from 'prompts'
		import { red, green, bold } from 'kleur/colors'
		import { red, green,cyan,bold } from 'kleur/colors'

		import ejs from 'ejs'

Expand All		@@ -20,6 +20,8 @@ import getLanguage from './utils/getLanguage'
		import renderEslint from './utils/renderEslint'
		import trimBoilerplate from './utils/trimBoilerplate'

		import cliPackageJson from './package.json'

		function isValidPackageName(projectName) {
		return /^(?:@[a-z0-9-~][a-z0-9-._~]\/)?[a-z0-9-~][a-z0-9-._~]$/.test(projectName)
		}
Expand DownExpand Up		@@ -61,33 +63,56 @@ function emptyDir(dir) {
		)
		}

		async function init() {
		console.log()
		console.log(
		process.stdout.isTTY && process.stdout.getColorDepth() > 8
		? banners.gradientBanner
		: banners.defaultBanner,
		)
		console.log()
		const helpMessage = `\
		Usage: create-vue [FEATURE_FLGAS...] [OPTIONS...] [DIRECTORY]

		Create a new Vue.js project.
		Start the CLI in interactive mode when no FEATURE_FLAGS is provided, or if the DIRECTORY argument is not a valid package name.

		Options:
		--force
		Create the project even if the directory is not empty.
		--bare
		Create a barebone project without example code.
		--help
		Display this help message.
		--version
		Display the version number of this CLI.

		Available feature flags:
		--default
		Create a project with the default configuration without any additional features.
		--ts, --typescript
		Add TypeScript support.
		--jsx
		Add JSX support.
		--router, --vue-router
		Add Vue Router for SPA development.
		--pinia
		Add Pinia for state management.
		--vitest
		Add Vitest for unit testing.
		--cypress
		Add Cypress for end-to-end testing.
		If used without ${cyan('--vitest')}, it will also add Cypress Component Testing.
		--playwright
		Add Playwright for end-to-end testing.
		--nightwatch
		Add Nightwatch for end-to-end testing.
		If used without ${cyan('--vitest')}, it will also add Nightwatch Component Testing.
		--eslint
		Add ESLint for code quality.
		--eslint-with-prettier
		Add Prettier for code formatting in addition to ESLint.

		Unstable feature flags:
		--tests, --with-tests
		Add both unit testing and end-to-end testing support.
		Currently equivalent to ${cyan('--vitest --cypress')}, but may change in the future.
		`

		async function init() {
		const cwd = process.cwd()
		// possible options:
		// --default
		// --typescript / --ts
		// --jsx
		// --router / --vue-router
		// --pinia
		// --with-tests / --tests (equals to `--vitest --cypress`)
		// --vitest
		// --cypress
		// --nightwatch
		// --playwright
		// --eslint
		// --eslint-with-prettier (only support prettier through eslint for simplicity)
		// in addition to the feature flags, you can also pass the following options:
		// --bare (for a barebone template without example code)
		// --force (for force overwriting without confirming)

		const args = process.argv.slice(2)

		// alias is not supported by parseArgs
Expand All		@@ -106,6 +131,16 @@ async function init() {
		strict: false,
		})

		if (argv.help) {
		console.log(helpMessage)
		process.exit(0)
		}

		if (argv.version) {
		console.log(`${cliPackageJson.name} v${cliPackageJson.version}`)
		process.exit(0)
		}

		// if any of the feature flags is set, we would skip the feature prompts
		const isFeatureFlagsUsed =
		typeof (
Expand DownExpand Up		@@ -145,6 +180,14 @@ async function init() {
		needsPrettier?: boolean
		} = {}

		console.log()
		console.log(
		process.stdout.isTTY && process.stdout.getColorDepth() > 8
		? banners.gradientBanner
		: banners.defaultBanner,
		)
		console.log()

		try {
		// Prompts:
		// - Project name:
Expand Down