CHAPTER 01 Beginner

Introduction to Vue.js

Updated: May 18, 2026

5 min read

# CHAPTER 1

Introduction to Vue.js

1. Chapter Introduction

Building interactive user interfaces used to mean writing complex, hard-to-maintain JavaScript. Vue.js changed that by introducing a reactive, component-based architecture that makes UIs predictable, reusable, and enjoyable to build. Created by Evan You in 2014, Vue has grown into one of the three most popular JavaScript frameworks — loved by developers for its gentle learning curve and powerful capabilities.

Analogy: React is a power tool for specialists. Angular is an enterprise aircraft. Vue is a sports car — fast, elegant, and accessible to anyone who has driven before (knows basic JavaScript).

2. Learning Objectives

Understand what Vue.js is and what problems it solves.

Know Vue's history and evolution to Vue 3.

List Vue's core features.

Compare Vue to React and Angular.

Understand the "Progressive Framework" concept.

3. What is Vue.js?

Vue.js (pronounced "view") is a progressive JavaScript framework for building user interfaces. "Progressive" means you can adopt it incrementally — from a simple script tag on one page to a full-featured SPA (Single Page Application).

text

1234567

Vue.js Core Capabilities:
1. Declarative Rendering  — describe WHAT your UI should look like
2. Component System       — build UIs as reusable, composable pieces
3. Reactivity             — data changes automatically update the DOM
4. Directives             — extend HTML with v-if, v-for, v-model
5. Router                 — client-side navigation (Vue Router)
6. State Management       — global state (Pinia)

4. History of Vue.js

Year	Milestone
2014	Evan You (ex-Google/Angular) releases Vue.js 0.6
2015	Vue 1.0 released — community grows rapidly
2016	Vue 2.0 — Virtual DOM, improved reactivity
2019	Vue 3.0 RFC — Composition API proposed
2020	Vue 3.0 "One Piece" released
2022	Vue 3 becomes the new default; Pinia replaces Vuex
2024	Vue 3.4+ with significant performance improvements

5. Key Features of Vue.js

1. Reactive Data Binding:

vue

123456789

<script setup>
import { ref } from &#039;vue'
const message = ref(&#039;Hello Vue!')
</script>

<template>
  <h1>{{ message }}</h1>
  <!-- When message changes, the DOM updates automatically -->
</template>

2. Component-Based Architecture:

text

123456789

App
├── Navbar
├── Sidebar
├── Main
│   ├── ProductList
│   │   ├── ProductCard
│   │   └── ProductCard
│   └── ProductFilter
└── Footer

3. Progressive Integration:

html

12345

<!-- Option A: Just a script tag on a page -->
<script src="https://unpkg.com/vue@3"></script>

<!-- Option B: Full SPA with Vite + Vue Router + Pinia -->
npm create vue@latest

6. Vue vs React vs Angular

Feature	Vue 3	React 18	Angular 17
Learning Curve	Easy	Moderate	Steep
Language	JS/TS	JS/JSX/TS	TypeScript
Architecture	Progressive	Library	Full framework
Reactivity	Built-in	useState/hooks	Signals
State Mgmt	Pinia	Redux/Zustand	NgRx
Template	HTML templates	JSX	HTML templates
Bundle Size	~22KB	~45KB	~150KB+
Best For	SPAs, rapid dev	Complex UIs	Enterprise apps

When to Choose Vue:

Starting a new frontend project

Team has HTML/CSS background

Need fast development speed

Building SPAs, dashboards, portals

7. The Progressive Framework

text

12345678910111213

Vue&#039;s Progressive Adoption:

Level 1 — Enhancement (no build step):
  <script src="https://unpkg.com/vue@3"></script>
  Add interactivity to existing HTML pages

Level 2 — SPA (with build tools):
  npm create vue@latest
  Full reactive component application

Level 3 — Full-Stack:
  Vue + Nuxt.js (SSR/SSG)
  Universal rendering, SEO-optimized

8. Applications of Vue.js

SPAs: Admin dashboards, user portals, web apps.

Progressive Enhancement: Add interactivity to server-rendered pages.

Mobile Apps: Ionic Vue, Capacitor.

Desktop Apps: Electron + Vue.

JAMstack: Nuxt.js for SSG/SSR.

Used by: Alibaba, GitLab, Grammarly, Nintendo, Adobe.

9. Mini Project: Welcome Vue Application

html

123456789101112131415161718192021222324252627282930313233343536373839404142

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Welcome to Vue.js</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    body { font-family: sans-serif; display: grid; place-items: center; min-height: 100vh; background: #0f172a; color: white; margin: 0; }
    .card { background: #1e293b; padding: 2rem 3rem; border-radius: 16px; text-align: center; }
    .badge { background: #22c55e; padding: 4px 12px; border-radius: 99px; font-size: .75rem; display: inline-block; margin-bottom: 1rem; }
    input { background: #334155; border: 1px solid #475569; color: white; padding: .5rem 1rem; border-radius: 8px; font-size: 1rem; outline: none; }
    h1 { font-size: 2.5rem; margin: .5rem 0; }
    p { color: #94a3b8; }
  </style>
</head>
<body>
  <div id="app">
    <div class="card">
      <span class="badge">Vue 3</span>
      <h1>Hello, {{ name || &#039;World' }}! 👋</h1>
      <p>Welcome to the Vue.js learning journey.</p>
      <input v-model="name" placeholder="Type your name..." />
      <p style="margin-top:1rem;color:#4ade80">
        🔄 Reactive: DOM updated automatically — {{ updateCount }} times
      </p>
    </div>
  </div>

  <script>
    const { createApp, ref, watch } = Vue;
    createApp({
      setup() {
        const name = ref(&#039;');
        const updateCount = ref(0);
        watch(name, () => updateCount.value++);
        return { name, updateCount };
      }
    }).mount(&#039;#app');
  </script>
</body>
</html>

10. Common Mistakes

Confusing Vue 2 and Vue 3 syntax: Vue 3 uses setup() and the Composition API. Vue 2 uses data(), methods:. They are different APIs. This course covers Vue 3.

Thinking Vue requires a build step: Vue can run with a <script> CDN tag for simple use cases.

11. MCQs

Question 1

Vue.js was created by?

Question 2

What does "progressive framework" mean?

Question 3

Vue 3's default state management library?

Question 4

What makes Vue's DOM updates automatic?

Question 5

Vue is best compared to which template syntax?

Question 6

What is the Vue equivalent of `useState` in React?

Question 7

Which year was Vue 3 officially released?

Question 8

What does `v-model` do?

Question 9

Vue's Single File Component extension?

Question 10

What is Nuxt.js?

12. Interview Questions

Q: What is Vue.js? How does it differ from React?

Q: What does "progressive framework" mean in the context of Vue?

Q: What are the major differences between Vue 2 and Vue 3?

13. Summary

Vue.js is the most approachable professional JavaScript framework. Its combination of HTML-first templates, automatic reactivity, and the Composition API makes it ideal for developers at all levels. Vue 3 with Pinia and Vue Router is the modern standard for building production SPAs.

14. Next Chapter Recommendation

In Chapter 2: Installing Vue.js and Environment Setup, we set up a complete Vue 3 development environment with Vite, Vue Router, and Pinia in under 5 minutes.

Explore More

Browse All 21+ Subject Areas

Quick Links

Visual Algorithm Labs

Frontend Dev

The Future of Web Architecture in 2026

Practice Quizzes

Introduction to Vue.js #

1. Chapter Introduction #

2. Learning Objectives #

3. What is Vue.js? #

4. History of Vue.js #

5. Key Features of Vue.js #

6. Vue vs React vs Angular #

7. The Progressive Framework #

8. Applications of Vue.js #

9. Mini Project: Welcome Vue Application #

10. Common Mistakes #

11. MCQs #

Vue.js was created by?

What does "progressive framework" mean?

Vue 3's default state management library?

What makes Vue's DOM updates automatic?

Vue is best compared to which template syntax?

What is the Vue equivalent of useState in React?

Which year was Vue 3 officially released?

What does v-model do?

Vue's Single File Component extension?

What is Nuxt.js?

12. Interview Questions #

13. Summary #

14. Next Chapter Recommendation #

Finish this Chapter

Discussion

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1

🎥 Related Videos 1

🗺️ Related Roadmaps 1

Send Feedback / Bug

Feedback Submitted!

Introduction to Vue.js

1. Chapter Introduction

2. Learning Objectives

3. What is Vue.js?

4. History of Vue.js

5. Key Features of Vue.js

6. Vue vs React vs Angular

7. The Progressive Framework

8. Applications of Vue.js

9. Mini Project: Welcome Vue Application

10. Common Mistakes

11. MCQs

What is the Vue equivalent of `useState` in React?

What does `v-model` do?

12. Interview Questions

13. Summary

14. Next Chapter Recommendation