What is Vue?

Vue is a JavaScript framework for building user interfaces. Like React, it lets you describe your UI declaratively and updates the DOM for you when your data changes — but Vue makes a different set of trade-offs about how much structure it hands you upfront, and how much you have to bring yourself.

You already know JavaScript, and maybe React. This course assumes that, and focuses on what's distinctly Vue: its templates, its reactivity system, and the conventions around Single-File Components.

A "progressive" framework

Vue describes itself as progressive because you can adopt as much or as little of it as you need. At the smallest scale, you can drop a <script> tag into a plain HTML page and start using Vue's reactivity on a handful of elements — no build step required:

<div id="app">{{ message }}</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({
    data() {
      return { message: "Hello, Vue!" };
    },
  }).mount("#app");
</script>

At the other end of the scale, the same core library powers full single-page applications with routing (Vue Router), centralized state (Pinia), server-side rendering (Nuxt), and a full build pipeline via Vite. You don't have to choose upfront — a project can start as a sprinkle of interactivity and grow into a full application without switching frameworks.

Templates over JSX

Vue's biggest visible difference from React is that it renders from HTML templates, not JSX:

<template>
  <p>{{ message }}</p>
</template>

This is closer to the HTML you already write, and it lets Vue statically analyze the template at build time — figuring out which parts of the DOM can change and which are permanently static — so updates can be faster with less work from you. The trade-off is a small amount of template-specific syntax to learn (v-if, v-for, and friends), which this course covers in detail.

Reactivity is built in, not bolted on

In React, re-rendering happens when state changes and you re-run a component function. In Vue, reactivity is a lower-level primitive: wrap a value in ref() or reactive(), and Vue tracks exactly which parts of the DOM depend on it. When that value changes, only those parts update — you're not re-running an entire component function on every change.

import { ref } from "vue";

const count = ref(0);
count.value++; // Vue already knows which DOM nodes to update

What this course covers

Starting from a fresh Vite-scaffolded project, you'll build up through templates, reactivity, components, routing, and state management with Pinia — using the Composition API with <script setup>, which is how modern Vue code is written. By the end, you'll be able to read and write real Vue applications, not just toy examples.