• merge d.ts into single file, move to root
• split router and vuex into separate options
• make jsx optional
• add command line flags like npm init vue -- --ts
• auto-update playgrounds and commit before each release (can be linked to as reference for upgrades)
• HelloWorld.vue redesign (https://github.com/vuejs/team-discussions/discussions/12)
• Improve README
  • explain npm scripts
• auto-generate playrounds and run tests during CI

In comparison to vue-cli, create-vue is very opinionated when it comes to tooling choices. Instead of asking for a selection from a list, it asks yes/no for much more limited options.

In order to make migration easier, the same options from Vue CLI should be allowed. The default choices can be opinionated but when no alternatives are provided it is discouraging. Using completely different tooling, while it might have significant improvements, increases the overhead of moving to Vue 3.

If it is the case that some of the options will cause conflict and extra work to integrate, then they can be omitted. But an approach of asking for a selection from a list would be much appreciated. This will also serve as guidance as to what is or is not supported.

In my case, the reason I am asking for this and the reason I mention

If it is the case that some of the options will cause conflict and extra work to integrate, then they can be omitted

is because I am having trouble using Jest with Vue 3.

After the website guided me to use the new Vue [3] website, I followed the new app creation instructions there. After declining the recommended unit test framework, I was left trying to install Jest myself.

You might think that I am lazy, and silly for not being able to install Jest on my own. But especially since many Vue packages are still scrambling to get going with Vue 3[1], I would much appreciate official guidance from the Vue team and other people smarter than I about this, which could come in the form of installing Jest for me.

To illustrate my problem, this StackOverflow question has three completely different package recommendations for Vue + Jest.

I found myself descending into some sort of dependency hell trying to install Jest for Vue with TypeScript.

Although I have mentioned my troubles, resolving them in a straightforward sense is not the point of this issue.

When I run npm init vue vue3-project to create a project, the package.json dosen't has name：

{
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 5050"
  },
  "dependencies": {
    "vue": "^3.2.29"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.1.0",
    "vite": "^2.7.13"
  }
}

Hi!

I'm trying to get unit tests to work properly and don't know how to deal with the following situation:

I started a new project with npm init vue@3 like so:

✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

At root of the src folder I add a simple TS file:

export const add = (a: number, b: number) => a + b;

And in my test, when I import it:

import { add } from '../utils';

I get the following error message:

module "...../src/utils"
File '..../src/utils.ts' is not listed within the file list of project '..../tsconfig.vitest.json'. Projects must list all files or use an 'include' pattern.ts(6307)

I left the tsconfigs file untouched, but here there are:

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },

  "references": [
    {
      "path": "./tsconfig.vite-config.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    }
  ]
}

{
  "extends": "@vue/tsconfig/tsconfig.node.json",
  "include": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["node", "jsdom"]
  }
}

when i use node v12，it will exit with error.

vue3 boilerplate here is composition by default but pinia is still fully options-api, can we make that composition by default for consistency?

Does this warning need to add shims-vue.d.ts files to eliminate it?

declare module '*.vue' {   
   import type { DefineComponent } from 'vue'   
   const component: DefineComponent<{}, {}, any>   
   export default component 
}

When scaffolding a vue app with Typescript and Pinia it throws this error:

Node: 16.13.0
OS: Windows 10 Pro
Terminal: Powershell

How to reproduce:

$ npm init vue@3

√ Project name: ... my-create-vue-app
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Cypress for testing? ... No / Yes

Scaffolding project in C:\Users\danny\Documents\code\my-create-vue-app...

Done. Now run:

  cd my-create-vue-app
  npm install
  npm run dev

$ cd my-create-vue-app
$ npm i

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/typescript
npm ERR!   dev typescript@"~4.4.4" from the root project
npm ERR!   peer typescript@"*" from [email protected]
npm ERR!   node_modules/vue-tsc
npm ERR!     dev vue-tsc@"^0.29.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^4.5.2" from [email protected]
npm ERR! node_modules/pinia
npm ERR!   pinia@"^2.0.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^4.5.2" from [email protected]
npm ERR!   node_modules/pinia
npm ERR!     pinia@"^2.0.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\danny\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\danny\AppData\Local\npm-cache\_logs\2021-12-03T14_00_21_729Z-debug.log

Hi,

I just created a Vue app using the npm init vue command.

When I run the test:e2 and test:e2e:ci commands on my machine, Cypress does not run after starting the server.

These errors are fixed when I replace http://127.0.0.1:5050/ with tcp:5050 in test:e2e and test:e2e:ci scripts.

This means replacing:

{
  "scripts": {
    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
  }
}

with:

{
  "scripts": {
    "test:e2e": "start-server-and-test preview tcp:5050 'cypress open'",
    "test:e2e:ci": "start-server-and-test preview tcp:5050 'cypress run'",
  }
}

fixed these errors.

Do you agree ? Can I create a pull request to fix this error?

Sorry for not understanding, but can anyone explain what is going on with the vue tooling?
During the last year or so, several dev tools have popped up, i.e. vue-cli, vite, create-vue etc
I would appreciate if someone would explain why use one over the other and which one to use? It's confusing and creating fragmentation in the community. Thanks.

Currently, create-vue creates a project with cypress-ct as the unit testing solution.
Some of the rationales are explained by @yyx990803 in this video

As much as we all love Cypress, Jest is a very popular solution in the unit testing world.

Would it be possible to have the choice to use Jest at the project creation?

That would be a tremendous help to teams who want to migrate existing projects. I understand that Jest + Vite is complicated at the moment, but the issue is already really popular vitejs/vite#1955
Even if we can't leverage Vite with jest, maybe we can offer a simple setup using Jest + @vue/vue3-jest + VTU as the CLI does?

If the team is willing to add Jest support out-of-the-box, I can work on a PR to add this.

步骤：
1、npm init vue@next 安装脚手架选择 TypeScript;（不设置 TypeScript 模板测试没有报错）
2、运行 npm run test:unit；

[vite] Internal server error: Cannot read property 'uid' of undefined
Plugin: vite:import-analysis
File: /Users/xxxx/projects/temp/vue-next/src/components/__tests__/HelloWorld.spec.ts

I'm new to Vue. I'm copying directly from the Vue tutorial.

Philip Smolen@DESKTOP-UOBK4AV MINGW64 /c/simple-projects/vue-test
$ npm init vue@latest
Error: EPERM: operation not permitted, mkdir 'C:\Users\Philip'
command not found: create-vue

Philip Smolen@DESKTOP-UOBK4AV MINGW64 /c/simple-projects/vue-test
$

It looks like a script is choking because my home directory has a space in it.

I tried several variations on this theme with no success. I tired it under Git Bash and Windows Power Shell. I moved to a directory without any spaces in the name. I tried vue@3 as recommended on another page. I tried --verbose but it didn't show anything useful.

Please advise. How do I get started with Vue? Thanks!

Expected Behavior

First line of HomeView.vue:
<script setup>

Current Behavior

First line of HomeView.vue:
<script setup lang="ts">

Possible Solution

I can find the mistake inside playground/router-pinia-with-tests/src/views/HomeView.vue but I'm not sure which template was used to generate it.
All projects without typescript should be created without lang="ts" in any of the files.

Steps to Reproduce

Scaffold a new project with:

1. NO Typescript
2. NO JSX
3. YES VueRouter
4. YES Pinia
5. YES Cypress

When trying to create a new Vue 3 project using npm init vue@latest with the defaults selected, I get a Cannot read property 'split' of undefined error when trying to run the project. See output below:

$ npm init vue@latest
npx: installed 1 in 1.371s

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-defaults
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /home/aner/vue-defaults...

Done. Now run:

cd vue-defaults
npm install
npm run dev

$ cd vue-defaults
$ npm install

[email protected] postinstall /home/aner/vue-defaults/node_modules/esbuild
node install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/vite/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-android-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"android","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-darwin-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-darwin-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"x64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-freebsd-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"freebsd","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-linux-32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"ia32"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-linux-mips64le):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"mips64el"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-linux-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-freebsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"freebsd","arch":"x64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-linux-arm):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"arm"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-linux-ppc64le):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"ppc64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-linux-s390x):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"s390x"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-linux-riscv64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"riscv64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-openbsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"openbsd","arch":"x64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-netbsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"netbsd","arch":"x64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-sunos-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"sunos","arch":"x64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-windows-32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"win32","arch":"ia32"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-windows-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"win32","arch":"x64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-windows-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"win32","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.

added 32 packages from 51 contributors and audited 51 packages in 2.642s

4 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

$ npm run dev

[email protected] dev /home/aner//vue-defaults
vite

error when starting dev server:
TypeError: Cannot read property 'split' of undefined
at /home/aner/vue-defaults/node_modules/vite/dist/node/chunks/dep-1412e872.js:70782:33
at Array.reduce ()
at _interpolate (/home/aner/vue-defaults/node_modules/vite/dist/node/chunks/dep-1412e872.js:70768:18)
at expand (/home/aner/vue-defaults/node_modules/vite/dist/node/chunks/dep-1412e872.js:70812:32)
at loadEnv (/home/aner/vue-defaults/node_modules/vite/dist/node/chunks/dep-1412e872.js:71436:13)
at resolveConfig (/home/aner/vue-defaults/node_modules/vite/dist/node/chunks/dep-1412e872.js:70919:9)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async createServer (/home/aner/vue-defaults/node_modules/vite/dist/node/chunks/dep-1412e872.js:56404:20)
at async CAC. (/home/aner/vue-defaults/node_modules/vite/dist/node/cli.js:688:24)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: vite
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/aner/.npm/_logs/2022-02-11T19_59_42_034Z-debug.log

Hello, the current project basically uses the CSS extension language to write styles, so I think that might be good to provide an option to choose to add it.

What do you think?

File Structure

• Rename vite-env.d.ts to just env.d.ts since it's no longer vite-specific
• Remove jsconfig.json and env.d.ts for non-TS projects (no longer necessary for latest Volar)

Welcome Screen

• Community should mention the @vuejs twitter account
• The welcome screen doesn't need the explicit scheme switch - it should just follow system preference.
• It feels a bit messy to have all these components/composables for the welcome screen in a fresh project. We should move them all under a src/welcome directory so the user can easily delete them. src/App.vue should just import and render a src/welcome/Welcome.vue component.
• Make the wording the for the Documentation item more succint: "Vue’s official documentation provides you with all the information you need to get started."

Publishing

• Move all deps to devDependencies + bundle with esbuild before publishing to reduce network requests

Steps to reproduce

Create a new project with Cypress > yes
Via npm init vue@latest

Problem 1

Running npm run test:unit:ci fails

Details:

[vite] Internal server error: Cannot read property 'uid' of undefined
  Plugin: vite:import-analysis
  File: ../with-tests/src/components/__tests__/HelloWorld.spec.js

Problem 2

Running npm run test:e2e:ci fails with hanging server

Details:

• No files are built in /dist folder, thus server returns CANNOT GET /

vite.confg.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

function resolve(dir: string) {
  return `${path.resolve(__dirname, dir)}/`;
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // "@/": new URL("./src/", import.meta.url).pathname,
      "@/": resolve("src/"),
    },
  },
});

when i use the default configuration of 'alias', my project will fail to build.like this

√ Project name: ... vue-project
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for both Unit and End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes

result

 [ERROR] [plugin vite:dep-pre-bundle] Detected inconsistent metadata for the path "node_modules/vue/dist/vue.runtime.esm-bundler.js" when it was imported here:

    node_modules/pinia/node_modules/vue-demi/lib/index.mjs:1:21:
      1 │ import * as Vue from 'vue'
        ╵                      ~~~~~

  The original metadata for that path comes from when it was imported here:

    dep:vue:2:14:
      2 │ export * from "./node_modules/vue/dist/vue.runtime.esm-bundler.js"
        ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The difference in metadata is displayed below:

   {
  -  "pluginName": null,
  +  "pluginName": "vite:dep-pre-bundle",
   }

  This is a bug in the "vite:dep-pre-bundle" plugin. Plugins provide metadata for a given path in an
  "onResolve" callback. All metadata provided for the same path must be consistent to ensure
  deterministic builds. Due to parallelism, one set of provided metadata will be randomly chosen for
  a given path, so providing inconsistent metadata for the same path can cause non-determinism.

It behaves normally when I don't add any additional configuration

The plugin "prettier-plugin-tailwindcss" is supposed to work when you install it with no more setup needed, but in create-vue projects it doesnt work. Supposedly it should sort your tailwindcss on format (with prettier) but it just doesnt, no errors, nothing.

Using VSCode

The vue-tsc version in this repo is 0.3.0, newest is 0.28.x

Scenario where this matters:

1. Someone creates a project using create-vue
2. He wants to remake the default template from SPA to component library to publish on NPM
3. He changes the "build" script in NPM to vue-tsc --declaration --emitDeclarationOnly && vite build, so that the lib contains rich typings for the components
4. He gets the

/home/user/vue-tsc-component-library-example/node_modules/vue-tsc/proxy.js:8
        throw 'emit mode is not yet support';

error.

The fix for the above error is to just run npm i -D vue-tsc@latest after npm init vue@next, but it'd be nice if the project shipped with the new version

Currently, create-vue does not set up a linter or formatter solution.

It is fairly common in JS/TS projects to have ESLint as a linter (especially now that TSLint is deprecated), and to even have Prettier as a formatter.

It would be great to have support for ESlint and Prettier out-of-the-box, to avoid developers the hassle of setting it up manually every time.

If the team is willing to add this, I can work on a PR.

I went with the following configuration:

npm init vue@3

Vue.js - The Progressive JavaScript Framework

√ Project name: ... client
√ Add TypeScript? ... Yes
√ Add JSX Support? ... Yes
√ Add Vue Router for Single Page Application development? ... No / Yes (tried with both)
√ Add Vitest for Unit Testing? ... No
√ Add Cypress for both Unit and End-to-End testing? ... No
√ Add ESLint for code quality? ... No

after running npm install, which gave me these three warnings:

npm WARN deprecated [email protected]: WARNING: This project has been renamed to @volar/pug-language-service. Install using @volar/pug-language-service instead.
npm WARN deprecated [email protected]: WARNING: This project has been renamed to @volar/typescript-language-service. Install using @volar/typescript-language-service instead.
npm WARN deprecated [email protected]: WARNING: This project has been renamed to @volar/vue-language-service. Install using @volar/vue-language-service instead.

I tried to run npm run dev and I'm getting the following error:

npm run dev

> [email protected] dev
> vite

X [ERROR] Cannot read file "../../../..": The handle is invalid.

    html:<redacted>/client/index.html:1:7:
      1 │ import "/src/main.ts"
        ╵        ~~~~~~~~~~~~~~

error when starting dev server:
Error: Build failed with 1 error:
html:<redacted>/client/index.html:1:7: ERROR: Cannot read file "../../../..": The handle is invalid.
    at failureErrorWithLog (<redacted>\client\node_modules\esbuild\lib\main.js:1599:15)
    at <redacted>\client\node_modules\esbuild\lib\main.js:1245:28
    at runOnEndCallbacks (<redacted>\client\node_modules\esbuild\lib\main.js:1030:63)
    at buildResponseToResult (<redacted>\client\node_modules\esbuild\lib\main.js:1243:7)
    at <redacted>\client\node_modules\esbuild\lib\main.js:1352:14
    at <redacted>\client\node_modules\esbuild\lib\main.js:662:9
    at handleIncomingPacket (<redacted>\client\node_modules\esbuild\lib\main.js:759:9)
    at Socket.readFromStdout (<redacted>\client\node_modules\esbuild\lib\main.js:629:7)
    at Socket.emit (node:events:394:28)
    at addChunk (node:internal/streams/readable:312:12)
npm ERR! code 1

Hi,

Thank you for creating this tool!

It would be really great if create-vue could setup and configure (including with JS or TS support) a chosen ruleset - like Vue CLI does.

For example when using Vue CLI a choice is presented:

vue-create today:

I have looked into how this can be setup and honestly it's pretty hard to understand - ESLint is powerful but hard to configure correctly. There appears to be many possible solutions but once Typescript is in the mix the complexity increases for anyone, like me, that isn't that familiar with the really low level details of configuring ESLint. Even if someone is able to work through the (many) conflicting articles on setting this up there is still the reality of needing to go through the same complexity for every new project.

One of the great features of Vue CLI is that this is already configured for a user if they pick TS, ESLint, Aibnb.

Please could this prompt be added to create-vue? (and the Standard standard too for users of that)

Since node 12 is still widly used, it will be convenient to set esbuild target as node 12

Just want to know the difference between with vue-cli and vite-cli？

I hope see command
deno run {comeurl}/create-vue-node.ts
the result same as npm init vue@latest
and
deno run {comeurl}/create-vue-deno.ts
result similar to npm init vue@latest but for deno tools
beside
npm init vue@latest

Since there is no jest and the test:unit command is configured to run cypress how do we unit test js/ts files that doesn't contains any vue stuffs?
For example a todoApi.ts that contains just business logic to fetch todos.

Currently (v3.1.4), the type-checking task uses the default tsconfig.json file, which excludes unit tests.

It would be nice to also typecheck tests: as a member of the VTU team, I can attest we spend a lot of time on the TypeScript support, so it would be sad to not check them by default 😄

Sadly, when running yarn typecheck -p tsconfig.vitest.json, the task fails with:

$ vue-tsc --noEmit -p tsconfig.vitest.json
incremental mode is not yet supported

/Users/cedric/Code/temp/test/node_modules/typescript/lib/tsc.js:99310
    function createIncrementalProgram(_a) { console.error('incremental mode is not yet supported'); throw 'incremental mode is not yet supported';
                                                                                                    ^
incremental mode is not yet supported

This leads to this issue in the Volar repo: vuejs/language-tools#787

Note that the last comment from @johnsoncodehk is to recommend using a single tsconfig.

So do you think the composite path is the best one? Maybe we should stick to a single tsconfig that checks tests and sources at the same time?

Many people strongly prefer the Options API and all the benefits it offers over Composition API (most importantly, inherent and enforced organizational structure). Much like all the documentation on the Vue website. Composition API and Options API should be treated equally as a choice.

I've posted the following in the vue-cli repo vuejs/vue-cli@7f3d511#comments

• thought it would be wiser to raise the issue here as well:

@yyx990803 Thanks for clarifying the fact that Vue CLI is now in maintenance mode and that you discourage its use for new Vue 3 projects.
I would recommend adding some proper, detailed documentation for the new Vite-based scaffolding tool create-vue because at the moment it's not trust inspiring - it is rather minimal and lacking any description.
Otherwise a lot of developers will probably stick to webpack-based vue-cli - this is the situation I am in now. I'd rather use Vue CLI 5 still in beta/rc than jump the ship from the tried-and-true webpack-based tooling, to new bells and whistles (just because it's seemingly faster).

Hello, maybe some newbie questions.

But I just want to remove the semicolons(I don't know why create-vue not set this as default rules)

so i added a .prettierrc file with the following settings, I think this is pretty common.

{
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 120,
  "trailingComma": "es5"
}

now vscode started to complain about these settings, how can I remove these warnings?

The following is how I started the project.

When creating a new app with TypeScript, any imports using absolute path syntax '@/' show as errors in Visual Studio Code with the Volar extension. The app still runs fine.

Steps to reproduce:

IDE: Visual Studio Code
Extension: Volar

npm init vue@3
Typescript support: yes
Everything else: no

pnpm install (or npm install)

Change an import to use @/ absolute syntax, such as in App.vue change the HelloWorld.vue import to import HelloWorld from '@/components/HelloWorld.vue'

There will now be a red line error: Cannot find module '@/components/HelloWorld.vue' or its corresponding type declarations.ts(2307)

Note: if you choose to install router when configuring create-vue, App.vue will already use the absolute path syntax and have an error.

Extra info

• I use Visual Studio Code + Volar extension for other vue 3 vue cli TypeScript projects and don't have the problem.

It seems that the Volar and TypeScript Vue Plugin have moved to the vue publisher ID in the VS Code marketplace where they previously were johnsoncodehk. They still are johnsoncodehk in the package.json of the version that currently gets installed (Guess they weren't released since the rename), but that no longer works in extensions.json to recommend them and it should now be:

"vue.volar", "vue.vscode-typescript-vue-plugin"

Steps to reproduce:

• Add Vitest for Unit Testing? ... Yes

Alternatively, it can be reproduced by cloning the following repository for reproduction.
https://github.com/tetradice/create-vue_issue_20220121

Problem:

When I run the npm run test:unit command, I get the following error:

$ npm run test:unit

> test:unit
> vitest --environment jsdom


 WATCH  d:/work/temp/vue3-no-test-issue

 ? src/components/__tests__/HelloWorld.spec.js (0)

??????????????????????????????? Failed Suites 1 ????????????????????????????????
 FAIL  src/components/__tests__/HelloWorld.spec.js [ src/components/__tests__/HelloWorld.spec.js ]
Error: No tests found in suite src/components/__tests__/HelloWorld.spec.js
 ? runSuite node_modules/vitest/dist/entry.js:1755:30
 ? async runSuites node_modules/vitest/dist/entry.js:1769:5
 ? async startTests node_modules/vitest/dist/entry.js:1774:3
 ? async node_modules/vitest/dist/entry.js:1798:7
 ? async withEnv node_modules/vitest/dist/entry.js:1481:5
 ? async run node_modules/vitest/dist/entry.js:1797:5

??????????????????????????????????????????????????????????????????????????[1/1]?
Test Files  1 failed (1)
     Tests  no tests
      Time  6.10s (in thread 1ms, 543803.87%)


 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

Environment:

OS: Windows 10 Home
Node: v14.17.5

so we can automate vue3 project creation

I tried to init new project with command "npm init vue@3"

but got this.

const isFeatureFlagsUsed = typeof (argv.default ?? argv.ts ?? argv.jsx ?? argv.router ?? argv.pinia ?? argv.tests ?? argv.vitest ?? argv.cypress ?? argv.eslint) === "boolean";
^

SyntaxError: Unexpected token ?
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)
at Module._compile (internal/modules/cjs/loader.js:664:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
at startup (internal/bootstrap/node.js:283:19)

npm init vue@2, there is no eslint prompt option offered. but vue@3 does have.
why? could you add eslint support for vue2?

It's not possible to initialize a project when there is existing files/folders in the project directory. In most cases that makes sense, but in the case of git-repositories it could be sensible to make an exception.

After all, only some people use vscode, it is not recommended to add the .vscode directory to the template

Hello,

Is there a recommendation for updating an existing project created with vue-create? ( npm init vue@3 )

Since the creation of my app, I see that there have been some fixes, like:

• #62
• #56
• #47

Thanks

Mathieu

It seems that on newly created Vue 3 projects simply running npm run build does not perform a typecheck, in fact the result is identical as running only the second part of the build script (vite build).

Steps to reproduce:

1. Run npm init [email protected]
2. Answer yes to all questions
3. Create a TypeScript error in one of the project files. For example go to TheWelcome.vue and at the end of script tag add const a: number = "888";
4. Run npm run build ("build": "vue-tsc --noEmit && vite build")

Expected result - build failure due to ts error
Current result - successful build

Can you please clarify if my interpretation that vue-tsc --noEmit in build script is supposed to perform type check is wrong or if it was in fact meant to perform a typecheck?

npm-cache_npx\2f7e7bff16d1c534\node_modules\create-vue\outfile.cjs:5897
const userAgent = process.env.npm_config_user_agent ?? "";
^

SyntaxError: Unexpected token '?'
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
at internal/main/run_main_module.js:17:47

I spotted a comment in a recent commit about Vitest support.

That would be great, and probably a better alternative than Jest support.

I would be willing to help move this forward if nobody is working on this

I suppose we would add a --vitest flag.

How do you plan to integrate with the current --tests flag?

Something like: if both --cypress and --vitest are present, use Vitest for unit test, and use Cypress for e2e, otherwise, if only cypress is present, use it for both (as --tests does now)?

It will also add other combinations for the playground: is it OK? (jsx-pinia-vitest, jsx-pinia-cypress, jsx-pinia-vitest-cypress, jsx-router-vitest, etc...)

使用TypeScript时似乎缺少 “@types/node” 依赖

路径别名配置似乎也有问题

 > html:src/App.vue:5:7: error: Could not resolve "@/components/HelloWorld.vue" (the plugin "vite:dep-scan" didn't set a resolve directory)
    5 │ import '@/components/HelloWorld.vue'
      ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > html:/src/views/HomeView.vue:5:7: error: Could not resolve "@/components/TheWelcome.vue" (the plugin "vite:dep-scan" didn't set a resolve directory)
    5 │ import '@/components/TheWelcome.vue'
      ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// import { fileURLToPath } from 'url'
import { resolve } from 'path'

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: {
      //  '@/': fileURLToPath(new URL('./src/', import.meta.url))
      '@': resolve(__dirname, 'src')
    }
  }
})

Steps to reproduce:

• Create a new project with Cypress > yes

Problem:

Currently the App.vue file is created with a global style tag (not scoped) that imports a base.css style. This is perfectly fine as it's intended to be available throughout the app.

@import '@/assets/base.css';

When we try to run npm run test:unit Cypress doesn't import the base.css automatically. So the HelloWorld.spec.ts file executes correctly without failing, but the style from main.css is missing.

This can be easily fixed with a simple import "@/assets/base.css"; inside the spec file, but having to import it in every component spec file is inefficient.
One could use that same line inside the cypress/support/index.ts file: this runs before each spec, so they can all use the global css. But this breaks npm run test:e2e as integration tests will not be able to resolve the path.

What's the best way to import a stylesheet in every component spec file?
A best practice should be defined, and added to the default template for new projects, when the user chooses to include Cypress.

html:D:/myProject/fresh_homw/src/App.vue:2:23: error: Could not resolve "@/components/HelloWorld.vue" (the plugin "vite:dep-scan" didn't set a resolve directory)
2 │ import HelloWorld from '@/components/HelloWorld.vue'

A bug appears when we select the Vue Router option after npm init vue@latest. Given the bug I had to unselected it and installed Vue Router manually and everything ok at that point. Anyway, I thought it was a good idea to report this issue. The errors and the steps I took are shown below.