Introduction

Vue is a framework for building user interfaces that update automatically whenever the data behind them changes — you describe what the page should look like for a given state, and Vue keeps the DOM in sync with it.

Two ways to start a Vue app

The fastest way to try Vue is a single script tag from a CDN — no build step required. For a real project you'd normally use the Vue CLI or Vite instead, which set up a build pipeline for you, but the CDN version behaves identically for everything this course covers:

<div id="app">{{ message }}</div>

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

Hello, Vue!

Vue.createApp() takes a configuration object — here just a data() function returning the values the template can use — and .mount('#app') tells Vue which element in the page it's responsible for. Everything inside #app becomes part of the Vue application; everything outside it is plain HTML Vue never touches.

What "reactive" actually means

The word you'll see constantly in Vue's own docs is reactive. It means: when a piece of data changes, anything in the template that depends on it re-renders automatically, without you writing any DOM-manipulation code yourself. You'll see this concretely once Reactive Data introduces a value that changes after a click.