Vue 3.5: the progressive framework

What is Vue.js?

Vue.js is a progressive JavaScript framework for building user interfaces. The word "progressive" captures its core design philosophy: you can adopt as little or as much of it as your project requires. Add a single <script> tag to an existing page to sprinkle in interactivity, or build a full Single Page Application (SPA) with Vue Router, Pinia, and SSR — the framework scales with you.

Vue was created by Evan You in 2014 after he worked at Google with AngularJS. He wanted to extract the parts he liked about AngularJS and build something much lighter. Today Vue is one of the three most popular frontend frameworks alongside React and Angular, with over 45 million npm downloads per month.

Vue 3 and the Composition API

The biggest leap in Vue's history came with Vue 3, released in September 2020. It introduced the Composition API — a function-based approach to organizing component logic. Before it, the Options API was the only way to define components, using a large object with data, methods, computed, and mounted keys. The Composition API solves the key limitations of that pattern:

• Logic reuse: related state and behavior can be extracted into composable functions (similar to React hooks) and shared across components without mixins.
• Better TypeScript support: plain functions infer types naturally, without the complex type gymnastics required by the Options API.
• Clearer code organization: code for a single feature stays together instead of being spread across multiple option keys.

Vue 3.5, released in September 2024, refined the Composition API even further and added several quality-of-life improvements that you will encounter throughout this course.

The Progressive Framework model

Vue is designed to be incrementally adoptable. At the most basic level, it is a declarative rendering library: you describe what the UI should look like, and Vue takes care of updating the DOM efficiently.

<!-- Add Vue directly to any HTML page -->
<div id="app">{{ message }}</div>
<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  createApp({ setup() { return { message: ref('Hello!') } } }).mount('#app')
</script>

On the other end of the spectrum, Vue pairs with its companion tools to form a complete ecosystem:

Setting up a Vue project

The official way to create a new project is with create-vue, the scaffolding tool powered by Vite:

npm create vue@latest my-vue-app

You will be presented with an interactive prompt:

✔ Add TypeScript?                   → Yes
✔ Add JSX Support?                  → No
✔ Add Vue Router for SPA?           → Yes
✔ Add Pinia for state management?   → Yes
✔ Add Vitest for unit testing?      → Yes
✔ Add ESLint for code quality?      → Yes
✔ Add Prettier for formatting?      → Yes

After answering, run:

cd my-vue-app
npm install
npm run dev

Vite's dev server starts in milliseconds and supports Hot Module Replacement (HMR) — component changes reflect in the browser instantly without a full page reload.

Project structure

A freshly scaffolded project looks like this:

my-vue-app/
  src/
    assets/           # Static assets (images, fonts)
    components/       # Reusable Vue components
    router/
      index.ts        # Route definitions
    stores/
      counter.ts      # Pinia stores
    views/            # Page-level components
    App.vue           # Root component
    main.ts           # Application entry point
  index.html          # HTML entry point
  vite.config.ts      # Vite configuration
  tsconfig.json       # TypeScript configuration

Vue vs React vs Angular

Understanding how Vue fits into the ecosystem helps you choose the right tool for each project:

Vue's HTML-based templates and its gentle learning curve make it particularly popular for teams coming from traditional web development backgrounds.

The Composition API at a glance

The centerpiece of Vue 3 is the Composition API. You write component logic inside a setup() function (or the <script setup> shorthand). State is defined with ref() and reactive(), derived values with computed(), and side effects with watch() and watchEffect().

import { ref, computed, watch } from 'vue'

const firstName = ref('Ada')
const lastName  = ref('Lovelace')

const fullName = computed(() => `${firstName.value} ${lastName.value}`)

watch(firstName, (newVal) => {
  console.log(`First name changed to: ${newVal}`)
})

Everything is just plain JavaScript — no class decorators, no magic strings, no hidden framework conventions. This makes Vue 3 code highly testable and easy to reason about.

Vue's rendering model

Vue uses a virtual DOM — a lightweight in-memory representation of the real DOM. When state changes, Vue calculates the minimal set of DOM operations required and applies them efficiently. Vue 3 also introduced compiler-optimized static hoisting: nodes that never change are extracted from the render function and reused across renders without any diffing, making updates extremely fast.

Practice

1. Scaffold a project: Run npm create vue@latest my-practice and select TypeScript, Vue Router, and Pinia. Explore the generated files and start the dev server.
2. Modify App.vue: Add a ref() variable, render it in the template, and add a button that changes its value. Observe how the UI updates automatically.
3. Read the Composition API docs: Browse vuejs.org/guide/introduction and compare the "Options API" and "Composition API" tabs on a few examples to appreciate the difference.

In the next lesson, we will explore Single File Components in depth — the .vue file format that keeps your templates, logic, and styles in one cohesive unit.