Vue.js: Vue.js Introduction

Last updated: 2026-10-20

Vue.js is a progressive JavaScript framework for building user interfaces. It lets you develop web apps declaratively and component by component — from a simple form to a complex enterprise SPA.

This tutorial targets beginners with basic HTML/CSS/JavaScript. It starts from Vue 3's core concepts and takes you all the way to building a complete mid-sized e-commerce admin system on your own. The learning curve differs from W3Schools or Runoob — we go Vue 3 + Composition API first, practised against a realistic e-commerce project (a SaaS admin with 5,000 merchants and 30,000 SKUs).

Related Core：reactive()

1. What You'll Learn

• What Vue.js is, and what "progressive framework" really means
• The core differences between Vue 3 and Vue 2 (and why Vue 3 is the choice)
• Composition API vs Options API — the comparison and how to choose
• The Vue 3 ecosystem: the roles of Vite, Vue Router, Pinia and Element Plus
• Who should learn Vue, and what you can build afterwards

2. A SaaS Team's Frontend Decision

(1) The pain: five frameworks, which one?

A fast-growing SaaS company has 200,000 lines of frontend code. In Q1 2026 its tech lead Alice faces a hard call:

• React 18+: team knows it, but the bundle is 850KB and initial load takes 3.2s
• Vue 3: zero team experience, but the bundle is 280KB and initial load is 0.9s
• Angular 17: TypeScript friendly, but a steep curve — new hires need 2 months
• Svelte 4: compile-time optimised, but a small ecosystem and few jobs
• Solid.js: the fastest, but a 50k community — no Stack Overflow answers when you are stuck

Product manager Charlie piles on the pressure:

"Our admin manages 30,000 SKUs. Our current React app takes 8 seconds to filter. New developers need 3 weeks to ship their first feature. By Q3 2026 both numbers must improve 5×."

(2) The Vue 3 answer

After four weeks of evaluation, Alice picks Vue 3:

Bundle size:     850KB → 280KB    (-67%)
Initial load:    3.2s  → 0.9s    (-72%)
Onboarding time: 3 weeks → 1 week (-67%)
Job market:      growing 35% YoY

Vue's "progressive" nature means Alice can adopt it step by step:

1. Week 1: replace one page with Vue 3 (CDN script tag, no build step)
2. Week 4: migrate 10 pages to single-file components
3. Week 12: full SPA with Router and Pinia
4. Week 24: all 200,000 lines migrated, zero downtime

(3) The payoff

Six months in, the team measures:

• Performance: dashboard filtering 8s → 0.8s (10× faster)
• Productivity: new features ship in 1 week instead of 3
• Hiring: 4 of 5 interviewees have Vue experience (React: 2)
• Bundle: 570KB saved = pages load 30% faster = 8% higher conversion

3. What Is Vue?

Vue (pronounced /vjuː/, like "view") is a progressive JavaScript framework for building user interfaces. Evan You created it in 2014; today the Vue core team and a global community maintain it.

(1) The definition + Vue 3 architecture

graph TB
    subgraph Vue3Ecosystem
        V[Vue 3 Core<br/>@vue/runtime-core]
        R[Vue Router 4<br/>Routing]
        P[Pinia<br/>State Management]
        S[SSR/SSG<br/>Nuxt 3]
        T[Vite<br/>Build Tool]
        U[UI Libraries<br/>Element Plus/Naive UI]
    end
    
    V --> R
    V --> P
    V --> S
    T --> V
    U --> V
    
    style V fill:#42b883,color:#fff
    style R fill:#35495e,color:#fff
    style P fill:#ffd02f
    style S fill:#00dc82
    style T fill:#646cff,color:#fff

graph TB
    subgraph Vue3Ecosystem
        V[Vue 3 Core<br/>@vue/runtime-core]
        R[Vue Router 4<br/>Routing]
        P[Pinia<br/>State Management]
        S[SSR/SSG<br/>Nuxt 3]
        T[Vite<br/>Build Tool]
        U[UI Libraries<br/>Element Plus/Naive UI]
    end
    
    V --> R
    V --> P
    V --> S
    T --> V
    U --> V
    
    style V fill:#42b883,color:#fff
    style R fill:#35495e,color:#fff
    style P fill:#ffd02f
    style S fill:#00dc82
    style T fill:#646cff,color:#fff

(2) Five core traits

(3) Where Vue fits

▶ Example: CDN setup (a working page in 5 lines)

Output: open the HTML file and the page shows "Hello Vue 3!" plus a button; each click increments the number.

4. Vue 3 vs Vue 2: Core Differences

(1) Improvements at a glance

(2) Why Vue 3?

✅ Vue 3 is the current major version (released 2020-09, stable for 5+ years in 2026)
✅ Vue 2 reached EOL in 2023-12 and is no longer maintained
✅ 90% of new projects and 100% of new tooling target Vue 3
✅ Composition API is the recommended modern style
✅ TypeScript support improved markedly, raising code quality

❌ Vue 2 matters only when maintaining legacy projects
❌ Skipping Vue 3 means missing 95% of modern Vue tooling

5. Composition API vs Options API

(1) Two API styles side by side

(2) Options API example

// Options API - grouped by option type (passed to createApp)
{
  data() {
    return { count: 0, name: 'Alice' }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}

(3) Composition API example

// Composition API - grouped by logic (inside setup())
const { ref, computed, onMounted } = Vue

setup() {
  const count = ref(0)
  const name = ref('Alice')

  const doubleCount = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  onMounted(() => {
    console.log('Component mounted')
  })

  return { count, name, doubleCount, increment }
}

Output:

Hello Vue 3!
[Clicked 0 times] <- button
Each click adds 1: Clicked 1 times -> Clicked 2 times

(4) Which one?

▶ Example: Options API version (for comparison)

Output: the page shows "Hello Vue 3!" and "Count: 0, Double: 0"; clicking increments Count and Double follows automatically.

6. The Vue 3 Ecosystem

Vue 3 is not just a framework — it is a complete frontend ecosystem.

(1) Ecosystem map

graph LR
    subgraph Core
        V[Vue 3 Core]
    end
    
    subgraph Official
        R[Vue Router 4]
        P[Pinia]
        T[Vite]
    end
    
    subgraph Community
        E[Element Plus]
        N[Naive UI]
        U[UnoCSS]
        I[Vue I18n]
    end
    
    V --> R
    V --> P
    V --> T
    V --> E
    V --> N
    V --> U
    V --> I
    
    style V fill:#42b883,color:#fff

graph LR
    subgraph Core
        V[Vue 3 Core]
    end
    
    subgraph Official
        R[Vue Router 4]
        P[Pinia]
        T[Vite]
    end
    
    subgraph Community
        E[Element Plus]
        N[Naive UI]
        U[UnoCSS]
        I[Vue I18n]
    end
    
    V --> R
    V --> P
    V --> T
    V --> E
    V --> N
    V --> U
    V --> I
    
    style V fill:#42b883,color:#fff

(2) Key tools cheat sheet

(3) The full learning path

Phase 1 (this tutorial, Phases 1-3): Vue 3 core + Composition API
Phase 2 (this tutorial, Phase 4): Vue Router + Pinia + advanced APIs
Phase 3 (this tutorial, Phase 5): Vite + a real project + deployment
Advanced (recommended next): Nuxt 3 SSR / Vitest / performance tuning

Output:

Hello Vue 3!
Count: 0, Double: 0
[+1] after click -> Count: 1, Double: 2 (doubleCount doubles automatically)

7. Putting It Together: Your First Vue 3 App

▶ Example: Hello Vue 3 counter (Composition API)

Output (after clicking):

Hello Vue 3! Welcome, Alice!

You clicked the button 5 times.

[Click me]

By Alice, 2026

Output:

Hello Vue 3! Welcome, Alice!
You clicked the button 0 times.
[Click me] <- button
By Alice, 2026
After clicking: You clicked the button 1 times. (greeting and currentYear update via computed)

(1) 📊 4. Progress milestones (5 minutes / 30 minutes / 1 hour)

(2) 📊 5. Five common pitfalls (5-minute save)

Related Core：reactive()

❓ FAQ

📖 Summary

• Vue.js is a progressive JavaScript framework created by Evan You in 2014
• Vue 3 is the current major version (2020-09), stable for 5+ years as of 2026
• Vue 2 reached EOL in 2023-12 — new projects must use Vue 3
• Vue 3's core upgrades: Proxy reactivity, Composition API, first-class TypeScript, tree-shaking
• Composition API is the recommended modern style with more flexible logic reuse
• Ecosystem: Vite (build) + Vue Router 4 (routing) + Pinia (state) + Element Plus (UI)
• Adopt progressively: from a CDN script tag to a full SPA
• Best fit: small to mid SPAs (e-commerce/CRM/Admin) and mid-sized enterprise apps

📝 Exercises

1. Basic (difficulty ⭐) Visit the vuejs.org docs, list three core Vue 3 features, and explain each in one sentence.

2. Intermediate (difficulty ⭐⭐) Compare Vue 3 and React 18 across the following (use a table):

   Aspect	Vue 3	React 18
   Bundle size	?	?
   Learning curve	?	?
   State management	?	?
   Routing library	?	?
   Market share in China	?	?

3. Challenge (difficulty ⭐⭐⭐) Research three real projects around you (your company, a friend's company, an open-source project) and record:

   1. Which frontend framework does it use?
   2. Why was that framework chosen?
   3. What would a migration to Vue 3 cost?

   Write a 300-word report and post it in the comments.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us