Installing Vue.js and Environment Setup

# CHAPTER 2

Installing Vue.js and Environment Setup #

1. Chapter Introduction #

2. Learning Objectives #

• Install Node.js and npm.

• Create a Vue 3 project with Vite.

• Understand the create-vue scaffolding options.

• Set up VS Code with Vue extensions.

• Run and explore a new Vue project.

3. Prerequisites #

# Check if Node.js is installed (need v18+)
node --version   # Should show v18.x.x or higher
npm --version    # Should show 9.x.x or higher

# Install Node.js if needed: https://nodejs.org

4. Method 1: CDN (No Install) #

<!-- Vue 3 via CDN — for quick experiments -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>
<script>
  const { createApp, ref } = Vue;
  createApp({
    setup() {
      const message = ref(&#039;Hello from Vue CDN!');
      return { message };
    }
  }).mount(&#039;#app');
</script>

5. Method 2: Vite (Recommended — Production Standard) #

# Create a new Vue 3 project
npm create vue@latest

# Interactive prompts — recommended selections:
# ✔ Project name: my-vue-app
# ✔ Add TypeScript? No (for beginners) / Yes (recommended for teams)
# ✔ Add JSX Support? No
# ✔ Add Vue Router? Yes
# ✔ Add Pinia? Yes
# ✔ Add Vitest? Yes (for testing)
# ✔ Add an End-to-End Testing Solution? No
# ✔ Add ESLint? Yes
# ✔ Add Prettier? Yes

cd my-vue-app
npm install
npm run dev

Output:
  VITE v5.x.x ready in 300ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

6. Method 3: Minimal Vite Setup (Manual) #

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

7. Project Scripts #

npm run dev      # Start dev server (hot reload)
npm run build    # Build for production → /dist folder
npm run preview  # Preview production build locally
npm run test     # Run unit tests (if Vitest configured)
npm run lint     # Run ESLint

8. VS Code Setup #

• Volar (Vue - Official) — syntax highlighting, IntelliSense, autocomplete for .vue files

• Vue VSCode Snippets — type vbase to scaffold a component

• ESLint — real-time linting

• Prettier — code formatting

• GitLens — enhanced Git integration

• Auto Import — auto-imports Vue APIs

// .vscode/settings.json (add to project)
{
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "editor.formatOnSave": true,
  "editor.tabSize": 2
}

9. First Vue 3 App #

npm create vue@latest hello-vue
cd hello-vue
npm install
npm run dev

<!-- src/App.vue — modify the default app -->
<script setup>
import { ref } from &#039;vue'

const count = ref(0)
const name = ref(&#039;Vue 3')
</script>

<template>
  <main>
    <h1>Welcome to {{ name }}!</h1>
    <p>You clicked the button {{ count }} times.</p>
    <button @click="count++">Click me</button>
  </main>
</template>

<style scoped>
main { text-align: center; padding: 2rem; font-family: sans-serif; }
button { padding: .5rem 1.5rem; background: #42b883; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1rem; }
</style>

10. Common Mistakes #

• Using Node v16 or below: Vue 3 with Vite requires Node 18+. Always check node --version first.

• Confusing npm run dev and npm start: Vite projects use npm run dev. npm start is for older Create React App / Express setups.

11. MCQs #

12. Interview Questions #

• Q: What is the difference between Vue CLI and Vite? Why is Vite preferred?

• Q: What does npm create vue@latest scaffold that npm create vite --template vue does not?

13. Summary #

14. Next Chapter Recommendation #