What Vue is
Vue is a framework for building user interfaces in the browser. You describe what the page should look like for the current data, and Vue updates the right elements itself when the data changes. The course covers Vue 3 (the current 3.5 line) and uses the recommended style — the Composition API with <script setup>.
Why a framework
In the DOM lessons of the tutorial you found elements with querySelector, attached handlers and changed textContent by hand. That is fine for a counter, but in a large interface it is easy to forget to update one of the elements. Vue takes this work away:
| Without a framework | With Vue |
|---|---|
| Find an element and change its text | Change a variable — the text updates itself |
| Create list items in a loop | Describe one item and the v-for directive |
| Keep state in the DOM | Keep state in component variables |
Components
A Vue interface is built from components — small self-contained parts of a page: the form for adding a task, one list item, the site header. Each component lives in its own file with the .vue extension, where markup, code and styles sit side by side.
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Clicked: {{ count }}</button>
</template>This is a whole component: the button shows a number and increases it on every click. The code never touches the DOM — Vue re-renders the button text itself.
What you need
- Node.js 20 or newer — check with
node -v; - a code editor, for example VS Code with the Vue (Official) extension;
- JavaScript from the tutorial: modules, arrow functions, arrays and their methods,
fetchandasync/await.
What the course covers
First you build a to-do list: adding tasks, marking them done, deleting, filters. It is used to explain templates, reactivity and components. Then you build a small blog that loads posts from an API, with several pages on Vue Router and a shared store on Pinia. At the end — tests and deployment.
Common mistake
The internet is full of examples for Vue 2 and for the Options API — with data(), methods and computed blocks inside an export default object. That code still works in Vue 3, but mixing two styles in one project is awkward. If an example starts with export default and data(), look for the <script setup> version: the Vue documentation has an API switch in the left menu.