Project Structure

A freshly scaffolded Vue 3 + TypeScript + Vue Router + Pinia project has a specific structure. Understanding each file’s role prevents confusion and helps you know where to make changes.

The top-level layout

family-tree/
├── public/               ← static assets served as-is (favicon, robots.txt)
├── src/                  ← all your application code lives here
│   ├── assets/           ← images, fonts, CSS imported by components
│   ├── components/       ← reusable Vue components
│   ├── router/           ← Vue Router configuration
│   │   └── index.ts
│   ├── stores/           ← Pinia stores
│   │   └── counter.ts    ← example store (you'll replace this)
│   ├── views/            ← page-level components rendered by the router
│   │   ├── HomeView.vue
│   │   └── AboutView.vue
│   ├── App.vue           ← root component — the shell of the app
│   └── main.ts           ← entry point — creates and mounts the Vue app
├── index.html            ← the single HTML file; Vue renders into it
├── tsconfig.json         ← TypeScript config
├── tsconfig.app.json     ← TypeScript config for src/
├── tsconfig.node.json    ← TypeScript config for vite.config.ts
└── vite.config.ts        ← Vite configuration

Key files explained

index.html

This is the one HTML file that the browser loads. It contains a single <div id="app"></div>. Vue mounts your entire application inside that div. Everything else is JavaScript.

src/main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

This file bootstraps the app. createApp(App) creates a Vue application instance from your root component. .use(createPinia()) installs Pinia. .use(router) installs Vue Router. .mount('#app') attaches the app to the <div id="app"> in index.html.

src/App.vue

The root component. It renders <RouterView /> which displays whatever view component matches the current URL. It often also contains persistent UI like a navbar.

src/router/index.ts

Defines the route table — which URL path maps to which view component. You’ll learn this in Module 05.

src/stores/

Contains Pinia stores — shared reactive state used across multiple components. You’ll learn this in Module 06.

src/views/ vs src/components/

The convention: views are page-level components tied to a route (e.g., HomeView.vue, PersonDetailView.vue). Components are reusable UI pieces used inside views (e.g., PersonCard.vue). This is just a convention — Vue doesn’t enforce it — but it makes codebases easier to navigate.

vite.config.ts

Configures Vite. The default config is fine for this course. The most useful option is @ path alias — it means @/components/Foo.vue resolves to src/components/Foo.vue regardless of where you are in the file tree.

Exercise

1. Open your scaffolded project and locate each file mentioned above.
2. Open src/main.ts. Identify the three steps: creating the app, installing plugins, and mounting.
3. Open src/App.vue. Find the <RouterView /> component. This is what renders your pages.
4. Open src/router/index.ts. What two routes are defined by default? What components do they map to?

Recap

• index.html is the shell — Vue renders into <div id="app">.
• src/main.ts creates the app, installs Pinia and Vue Router, and mounts to the DOM.
• src/App.vue is the root component — typically contains the navbar and <RouterView />.
• src/views/ holds page-level components; src/components/ holds reusable UI pieces.
• src/router/index.ts maps URL paths to view components.
• src/stores/ holds Pinia stores for shared state.