Module Recap

Module 01 covered the foundation: what Vue is, how to scaffold a project, the reactive counter, the project structure, and Single-File Components. Here is what to take forward.

What you learned

Vue is a progressive reactive framework. Unlike React, which is a rendering library, Vue ships with an official router and state library. Unlike Angular, you can adopt these features gradually. Vue 3’s Composition API with <script setup> is the modern default.

Vite scaffolds Vue projects instantly. npm create vue@latest gives you a configured project with TypeScript, Vue Router, and Pinia in under a minute. npm run dev starts a dev server with near-instant HMR.

Reactive data drives the UI. ref(value) creates reactive state. When .value changes, Vue automatically re-renders any template that depends on it. You declare what the UI should look like — Vue keeps the DOM in sync.

Single-File Components are self-contained. A .vue file holds logic (<script setup>), structure (<template>), and scoped styles in one place. Everything declared in <script setup> is available directly in the template.

The project structure is deliberate. main.ts bootstraps the app. App.vue is the root component. Views are route-level components. Components are reusable UI pieces. Stores hold shared state.

How this connects to FamilyTree

The project structure you explored is exactly what FamilyTree uses:

src/
├── components/
│   ├── FocusView/
│   │   └── FocusView.vue     ← the visual tree (uses v-for, v-if, PersonCard)
│   └── PersonCard/
│       └── PersonCard.vue    ← single person card (uses defineProps)
├── stores/
│   └── familyStore.ts        ← Pinia store for all people and relationships
├── views/
│   ├── HomeView.vue          ← contains FocusView
│   ├── AddPersonView.vue     ← form to add a person
│   ├── EditPersonView.vue    ← form to edit a person
│   └── PersonDetailView.vue  ← relationship management for a person
├── types/
│   └── index.ts              ← Person and SpouseRelationship interfaces
├── App.vue                   ← root: navbar + RouterView
├── main.ts                   ← creates app, installs Pinia + Router, mounts
└── router/
    └── index.ts              ← route table

Every module will fill in one more layer of this structure. By Module 07 it will be complete.

Key terms

Term	What it means
Composition API	Vue 3’s function-based component authoring style
<script setup>	Shorthand for the Composition API — no return statement needed
ref(value)	Creates a reactive reference; .value to read/write in script
SFC	Single-File Component — a .vue file with script, template, and style
Vite	The build tool powering Vue projects — instant dev server and fast HMR
npm run dev	Starts the Vite dev server
npm run build	Builds the production bundle into dist/
scoped styles	CSS that only applies to the current component

What is next

Module 02 — Components and Props →

Module 02 dives into components: how to create them, how the template syntax works in detail, how defineProps passes data from parent to child, how defineEmits sends events up, and how slots project content into a component. These are the building blocks FamilyTree uses for PersonCard, FocusView, and PersonForm.