beginner
frontend

Setting Up Vue Development Environment

Install Vue CLI, Vite, and configure your IDE for Vue.js development

vue fundamentals
15 min read

Setting Up Your Vue Development Environment

Before building Vue applications, you need to set up a proper development environment. This lesson covers all the tools you'll need.

Creating a Vue Project

Option 1: Using Vite (Recommended) ⚡

Vite is the recommended way to scaffold Vue projects. It's created by Evan You, the creator of Vue.

bash
# Create a new Vue project with Vite
npm create vue@latest

# Or with specific template
npm create vite@latest my-vue-app -- --template vue-ts

Interactive Setup

The create-vue wizard will ask you several questions:
✔Project name:my-vue-project
✔Add TypeScript?Yes
✔Add JSX Support?No
✔Add Vue Router?Yes
✔Add Pinia for state management?Yes
✔Add Vitest for Unit Testing?Yes
✔Add ESLint for code quality?Yes
✔Add Prettier for formatting?Yes

After setup, run these commands:

bash
cd my-vue-project
npm install
npm run dev

Option 2: Using Nuxt (Full-Stack)

For full-stack applications with SSR, SSG, and more:

bash
npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev

IDE Setup

VS Code Extensions

Recommended Extensions

Vue

Vue - Official (Volar)

Essential extension for Vue.js development with TypeScript support

Vue.volar
TS

TypeScript Vue Plugin

Enhanced TypeScript support for Vue SFCs

Vue.vscode-typescript-vue-plugin
ES

ESLint

Integrates ESLint into VS Code for code quality

dbaeumer.vscode-eslint
P

Prettier

Code formatter supporting Vue SFC files

esbenp.prettier-vscode

VS Code Settings

Add these settings to your .vscode/settings.json:

json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "vue.inlayHints.missingProps": true,
  "vue.inlayHints.inlineHandlerLeading": true
}

Essential Configuration Files

Common Commands

npm run devStart dev server
npm run buildBuild for production
npm run previewPreview production build
npm run test:unitRun unit tests
npm run lintLint and fix files

Next Steps

Continue Learning
Your Vue development environment is now set up! In the next lesson, we'll dive into Vue's template syntax and reactivity.

Next Lesson

Template Syntax & Reactivity