# What Vue Is — Vue.js

Source: https://www.skillbyai.com/en/vue/f-what

> Declarative, reactive, component-based.

## 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.

![Three ideas: what Vue is, setting up a project, template syntax.](assets/figures/vue/section-1-map.svg) — Figure 1.1 — Vue, project setup and templates.

## A Single-File Component

Template, script and scoped styles in one file.

```vue
<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.

**Quiz:** Why is Vue described as a progressive framework?

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

*Answer:* You can adopt it incrementally, from one widget to a full application. Use as much of Vue as the project needs.