Setting Up Vue Development Environment

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.

Prerequisites

Make sure you have Node.js (v18+) installed. Visit nodejs.org if you haven't already.

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

Success!

Your Vue app is now running at http://localhost:5173

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

Project Structure

my-vue-project/
├── 📁 node_modules/
├── 📁 public/
│   └── favicon.ico
├── 📁 src/
│   ├── 📁 assets/
│   │   └── main.css
│   ├── 📁 components/
│   │   └── HelloWorld.vue
│   ├── 📁 router/
│   │   └── index.ts
│   ├── 📁 stores/
│   │   └── counter.ts
│   ├── 📁 views/
│   │   ├── HomeView.vue
│   │   └── AboutView.vue
│   ├── App.vue
│   └── main.ts
├── .eslintrc.cjs
├── .prettierrc.json
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

IDE Setup

VS Code Extensions

Recommended Extensions

Vue

Vue - Official (Volar)

Essential extension for Vue.js development with TypeScript support

Vue.volar

TypeScript Vue Plugin

Enhanced TypeScript support for Vue SFCs

Vue.vscode-typescript-vue-plugin

ESLint

Integrates ESLint into VS Code for code quality

dbaeumer.vscode-eslint

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

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

💡 Pro Tip

Use Vue DevTools browser extension for debugging Vue applications. It provides component inspection, state management, and performance profiling.