Introduction to Vue 3

Vue is a progressive JavaScript framework for building user interfaces. "Progressive" means you can adopt it incrementally — use it for one interactive widget on a page, or build an entire SPA with it. Vue is designed to be approachable, performant, and flexible.

Vue vs React vs Angular

All three are excellent choices for modern frontend development. Here is how they differ:

Vue is the most approachable. Its template syntax is close to HTML, the learning curve is gentle, and the official documentation is the best in the JavaScript ecosystem. Vue's reactivity system is elegant — state changes automatically update the UI without boilerplate.

React is the most widely adopted. It uses JSX (JavaScript + HTML syntax) and requires more explicit state management. Its ecosystem is enormous.

Angular is the most opinionated. It is a complete framework with strong conventions, TypeScript by default, and a steeper learning curve. Best for large enterprise applications.

Vue 3 vs Vue 2

Vue 3, released in 2020 and now the standard, introduced the Composition API as an alternative to the Options API. The Composition API organises code by logic rather than by option type (data, methods, computed) — making large components easier to understand and share logic between components easier.

This course uses the Composition API throughout.

Your First Vue Component

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

Three things to notice:

• <script setup> is the Composition API shorthand — everything declared here is available in the template
• ref() creates a reactive value — when it changes, the UI updates automatically
• {{ count }} in the template renders the current value; @click attaches an event listener

How Vue's Reactivity Works

Vue tracks which reactive values each component uses. When a reactive value changes, only the components that depend on it re-render. This is more automatic than React's useState — you don't need to call a setter function, Vue detects the change.

const count = ref(0)
count.value++ // Vue detects this and updates the UI

For objects and arrays, use reactive() instead of ref():

const user = reactive({ name: 'Sabaoon', age: 30 })
user.age++ // Vue tracks this change automatically

Setting Up a Vue Project

npm create vue@latest my-project
cd my-project
npm install
npm run dev

The Vue CLI scaffolds a project with Vite, TypeScript support, and Vue Router optionally included.