Project Setup and Architecture

Module 07 builds FamilyTree — the app that runs through the entire course. In this lesson you scaffold the project, establish the folder structure, and plan what you’re building before writing any feature code.

Scaffolding the project

npm create vue@latest family-tree

Select these options:

✔ Add TypeScript? … Yes
✔ Add Vue Router? … Yes
✔ Add Pinia? … Yes
✔ Add ESLint? … Yes

Skip JSX, Vitest, and E2E testing.

cd family-tree
npm install
npm run dev

The target folder structure

Delete the scaffolded example files and establish this structure:

src/
├── assets/
│   └── main.css              ← global styles, CSS variables
├── components/
│   ├── FocusView/
│   │   └── FocusView.vue     ← visual tree: parents, focus, spouse, children
│   └── PersonCard/
│       └── PersonCard.vue    ← single person card, clickable
│   └── PersonForm/
│       └── PersonForm.vue    ← add/edit form
├── stores/
│   └── familyStore.ts        ← all people, relationships, focus state
├── types/
│   └── index.ts              ← Person, SpouseRelationship interfaces
├── views/
│   ├── HomeView.vue          ← contains FocusView + people list
│   ├── AddPersonView.vue     ← wraps PersonForm for adding
│   ├── EditPersonView.vue    ← wraps PersonForm for editing
│   └── PersonDetailView.vue  ← relationship management
├── App.vue                   ← navbar + RouterView
├── main.ts                   ← app bootstrap
└── router/
    └── index.ts              ← route table

Route plan

Path	Name	View
/	home	HomeView
/add	add	AddPersonView
/edit/:id	edit	EditPersonView
/:id	person	PersonDetailView

Component tree for FocusView

HomeView
└── FocusView
     ├── PersonCard × N   (parents row)
     ├── PersonCard × N   (step-parents row)
     ├── PersonCard × 1   (focus person — click to go to detail)
     ├── PersonCard × 1   (current spouse)
     └── PersonCard × N   (children row)

main.ts setup

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'
import router from './router'
import './assets/main.css'

const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.use(router)
app.mount('#app')

Exercise

1. Scaffold the project and install dependencies.
2. Delete the scaffolded example components and views (keep the folder structure).
3. Create all the empty files listed in the target folder structure above (even if they’re just stubs with <template><div></div></template>).
4. Run npm run dev and confirm the app builds without errors.

Recap

• Scaffold with npm create vue@latest, selecting TypeScript, Vue Router, Pinia, and ESLint.
• The folder structure separates types, stores, components, and views clearly.
• Four routes: home, add, edit (with :id), and person detail (with :id).
• main.ts bootstraps the app: creates Pinia with persistence plugin, installs router, mounts.