Vue 3 Project (JavaScript)

Recommended IDE Setup

VSCode

Volar (and disable Vetur)

EditorConfig

ESLint

StyleLint

"stylelint.validate": [
    "vue"
]

FormatCodeAction

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
    "source.formatDocument": true,
    "source.fixAll.eslint": true
},

Prettier

"editor.defaultFormatter": "esbenp.prettier-vscode"

Customize configuration

See Vite Configuration Reference.

Project Setup

Install Vue

npm i -g @vue/cli`

Follow the installation guide of nvm

Set the node/npm versions

nvm use

Install the dependencies

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Cypress

npm run 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):

npm run build
npm run test:e2e

Lint with ESLint

npm run lint

Lint CSS with StyleLint

npm run lint:style

PrimeVue UI

Supports a set of completely unstyled, fully accessible UI components.