What Vue Is

Progressive, reactive, component-based

Vue is a JavaScript framework for building user interfaces. It is called progressive because you can use it to enhance a single page element or to build a full single-page application with routing, state management and server-side rendering. Two core ideas drive it: declarative rendering (templates describe what the UI should look like for the current state) and reactivity (Vue tracks which state each piece of the UI depends on and updates the DOM when that state changes). Apps are built from components, usually written as Single-File Components (.vue files) that keep the template, logic and styles together. Vue 3 offers two styles: the Composition API (with <script setup>, used throughout this course) and the older Options API (data, methods, computed), which is still fully supported.

A progressive framework for the web

Vue renders your UI from reactive state using declarative templates, and you can adopt as much of it as you need.

A Single-File Component

Template, script and scoped styles in one file.

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

const count = ref(0)
</script>

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

<style scoped>
button { font-weight: bold; }
</style>

A spreadsheet for your UI

Like a spreadsheet cell whose formula refers to other cells, a Vue template refers to state; when the state changes, only the dependent parts are recalculated and redrawn.

Quick check: Why is Vue described as a progressive framework?

• It upgrades itself automatically
• It only supports progressive web apps
• You can adopt it incrementally, from one widget to a full application
• It renders pages progressively from the server only