Vue.js is a progressive JavaScript framework for building user interfaces. Created by Evan You, Vue balances approachability with the power needed for large applications.

Why Vue?

  • Progressive — drop a script tag on a page or build a full SPA
  • Reactive — UI updates automatically when data changes
  • Component-based — reusable, composable UI pieces
  • Great developer experience — single-file components, clear docs, fast tooling
  • Flexible ecosystem — Vue Router, Pinia, Nuxt, and more

Core Concepts 

  UI = f(state)

When reactive state changes → Vue re-renders affected components → DOM updates efficiently
Concept Description
Template HTML with Vue directives and bindings
Reactivity ref and reactive track data changes
Components Self-contained .vue files with template, script, style
Props / Emits Parent-to-child data and child-to-parent events
Composables Reusable logic extracted from components

Vue 3 Composition API

Vue 3 introduced the Composition API — a function-based way to organize component logic:

  <script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

Use <script setup> for concise, readable components. The Options API still works, but this track focuses on Composition API patterns.

Vue vs Vanilla JavaScript

Vanilla JS:

  const button = document.querySelector('#btn');
let count = 0;
button.addEventListener('click', () => {
  count++;
  document.querySelector('#count').textContent = count;
});

Vue:

  <script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <button @click="count++">Count: {{ count }}</button>
</template>

Vue handles DOM updates when count changes — no manual DOM manipulation.

When to Use Vue

Good fit:

  • Single-page applications (SPAs)
  • Dashboards, admin panels, and data-driven UIs
  • Incrementally enhancing server-rendered sites
  • Teams wanting a gentle learning curve with room to grow

Consider alternatives when:

  • Static content sites — Hugo, Astro, or plain HTML may suffice
  • Full-stack SSR needs — consider Nuxt (Vue’s meta-framework)

Vue Ecosystem

  • Vue Router — client-side routing for SPAs
  • Pinia — official state management (replaces Vuex)
  • Nuxt — full-stack framework with SSR/SSG
  • Vite — recommended build tool and dev server
  • Vitest — unit testing integrated with Vite

Prerequisites

Complete these before starting:

Next: create your first Vue project with Vite.