The Full Picture of Progressive

Looking Back

In this book, we started from a single HTML file.

Chapter	What We Did	File Structure
1	Wrote static HTML	index.html
2	Loaded Vue via CDN + ESM	index.html + CDN
3	Displayed data with template syntax	index.html + CDN
4	Made it dynamic with reactivity	index.html + CDN
5	Split into components	index.html + CDN

After 5 chapters, we have a dynamic application with search and filter functionality.
And the file was index.html — just one file — from start to finish.

No Node.js.
No build tools.
No terminal.

This Is "Progressive Framework"

This is why Vue.js is called a "Progressive Framework."

You can adopt it incrementally, only what you need.

1. Start with HTML
2. Add Vue with Import Map + <script type="module">
3. Add directives to the template (still HTML)
4. Make it dynamic with ref() and computed()
5. Structure it with components

Each step builds on top of the previous one.
Nothing gets thrown away.
HTML stays HTML. Templates stay HTML.

The Road Ahead

With the knowledge so far, you can build practical applications.
But as apps grow, new challenges emerge.

Single File Component (SFC)

Writing component template as JavaScript strings gets painful at scale.
Vue provides Single File Components (.vue files).

<!-- BookCard.vue -->
<template>
  <div class="card">
    <h2>{{ book.title }}</h2>
    <p>{{ book.description }}</p>
    <span class="tag" v-for="tag in book.tags">
      {{ tag }}
    </span>
  </div>
</template>

<script setup>
defineProps(['book'])
</script>

<style scoped>
.card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}
</style>

<template>, <script setup>, <style> — HTML, JavaScript, and CSS each in their own section.
The template is still HTML. Not crammed into a JavaScript string — with full syntax highlighting and editor support.

<script setup> is a more concise version of the setup() function we've been using.
No return needed — top-level variables and functions are directly available in the template.

SFCs require a build tool (Vite), and this is where Node.js first enters the picture.

Vue Router / Pinia

• Vue Router: Page navigation management (SPA routing)
• Pinia: Application-wide state management

These can all be adopted incrementally.
Add them when you need them, only as much as you need.

Nuxt

For even larger applications, Nuxt — a meta-framework — becomes an option.
It provides full-stack features: server-side rendering, file-based routing, auto-imports, and more.

The Progressive Staircase

Single HTML file
    ↓ Import Map + ESM
Vue via CDN
    ↓ Just add directives
Template syntax
    ↓ Just define ref() / computed()
Reactivity
    ↓ Just extract templates
Components
    ↓ Build tools enter here
SFC (.vue files) + <script setup>
    ↓ As needed
Vue Router / Pinia
    ↓ As further needed
Nuxt

At each stage, nothing is thrown away.
HTML stays HTML. Templates stay HTML.
You only add.

This is what Progressive means.

Templates Are HTML

The most important message repeated throughout this book.

Vue templates are HTML.
v-for, v-if, v-bind, v-on, v-model — all written as HTML attributes.
{{ }} — written in the text content position of HTML.

You don't need deep JavaScript knowledge to read a template.
If you can write HTML, you can read Vue templates.

This is intentional design.
Vue respects HTML — the foundation of the Web — and is built on top of it.

Summary

• Vue scales progressively from a single HTML file to a full-stack application
• Nothing is thrown away at any stage — you only add
• Templates remain HTML from start to finish
• setup() and Composition API (ref, computed) give you simple code without this
• Build tools are needed only when you start using SFCs
• Vue Router, Pinia, Nuxt — just add when needed
• Progressive means "adoptable incrementally" and "never breaking HTML"