Vue.js course · Module 15: TypeScript & Nuxt
Nuxt 3 - Basics
In this lesson8
Nuxt 3 is a meta-framework built on Vue 3 that provides SSR, SSG, file-based routing, and much more - out of the box, with no configuration. Think of it as the autopilot system of the NOVA LAB station - everything is configured and ready to go.
Creating a Nuxt 3 Project
1npx nuxi@latest init nova-lab-app
2cd nova-lab-app
3npm install
4npm run devFile-Based Routing
In Nuxt 3, you don't configure the router manually. The file structure in the pages/ folder automatically creates routes:
1pages/
2├── index.vue → /
3├── about.vue → /about
4├── crew/
5│ ├── index.vue → /crew
6│ └── [id].vue → /crew/123
7└── modules/
8 └── [...slug].vue → /modules/any/nested/pathThe index.vue file is the main page of a given directory. Files with square brackets [id].vue are dynamic parameters.
Layouts
Layouts define the shared structure of pages (navigation, footer):
1<!-- layouts/default.vue -->
2<template>
3 <div class="station">
4 <nav class="nav">
5 <NuxtLink to="/">Home</NuxtLink>
6 <NuxtLink to="/about">About</NuxtLink>
7 <NuxtLink to="/crew">Crew</NuxtLink>
8 </nav>
9
10 <main>
11 <slot />
12 </main>
13
14 <footer>NOVA LAB © 2087</footer>
15 </div>
16</template>Pages automatically use the default layout. You can change the layout on a specific page:
1<!-- pages/dashboard.vue -->
2<script setup lang="ts">
3definePageMeta({
4 layout: 'admin'
5})
6</script>useFetch - Data Fetching
useFetch is a Nuxt composable for fetching data. It works both on the server (SSR) and on the client:
1<script setup lang="ts">
2interface CrewMember {
3 id: number
4 name: string
5 role: string
6}
7
8// useFetch works on server and client
9const { data: crew, pending, error } = await useFetch<CrewMember[]>(
10 '/api/crew'
11)
12</script>
13
14<template>
15 <div v-if="pending">Loading...</div>
16 <div v-else-if="error">Error: {{ error.message }}</div>
17 <ul v-else>
18 <li v-for="member in crew" :key="member.id">
19 {{ member.name }} - {{ member.role }}
20 </li>
21 </ul>
22</template>useFetch automatically:
- Executes the request on the server during SSR
- Serializes the data and sends it to the client (avoids double fetching)
- Provides
pending,error,data,refreshstates
useAsyncData - More Flexible
useAsyncData gives full control over the data fetching logic:
1<script setup lang="ts">
2const { data: stats } = await useAsyncData('station-stats', () => {
3 return $fetch('/api/stats')
4})
5
6// With data transformation
7const { data: modules } = await useAsyncData(
8 'modules',
9 () => $fetch('/api/modules'),
10 {
11 transform: (data) => data.filter(m => m.active),
12 watch: [selectedSector] // automatic refresh
13 }
14)
15</script>Auto-imports
Nuxt 3 automatically imports:
- Vue composables (
ref,computed,watch...) - Nuxt composables (
useFetch,useRoute,useState...) - Components from
components/ - Utilities from
utils/andcomposables/
No need to write import { ref } from 'vue' - Nuxt does it for us!
1<script setup lang="ts">
2// No imports! Nuxt auto-imports ref, computed, useFetch
3const count = ref(0)
4const doubled = computed(() => count.value * 2)
5
6const { data } = await useFetch('/api/data')
7</script>Nuxt 3 Project Structure
1nova-lab-app/
2├── pages/ # File-based routing
3├── components/ # Auto-imported components
4├── composables/ # Auto-imported composables
5├── layouts/ # Page layouts
6├── server/ # API endpoints (Nitro)
7│ └── api/ # /api/* routes
8├── public/ # Static files
9├── app.vue # Root component
10└── nuxt.config.ts # Nuxt configurationServer API (Nitro)
Nuxt 3 uses Nitro to handle API endpoints:
1// server/api/crew.ts
2export default defineEventHandler((event) => {
3 return [
4 { id: 1, name: 'Dr. Nova', role: 'Commander' },
5 { id: 2, name: 'Atlas', role: 'Navigator' },
6 { id: 3, name: 'Echo', role: 'Engineer' }
7 ]
8})Code for this lesson: App.vue
1<script setup lang="ts">
2import { ref } from 'vue'
3
4// Simulation of the Nuxt 3 structure
5// (Sandpack does not support Nuxt, so we simulate the concept)
6
7type Page = 'home' | 'crew' | 'modules' | 'crew-detail'
8
9const currentPage = ref<Page>('home')
10const selectedCrewId = ref<number | null>(null)
11
12// Simulation of useFetch
13interface CrewMember {
14 id: number
15 name: string
16 role: string
17}
18
19interface StationModule {
20 id: string
21 name: string
22 status: string
23}
24
25// Data "from the API"
26const crewData: CrewMember[] = [
27 { id: 1, name: 'Dr. Nova', role: 'Commander' },
28 { id: 2, name: 'Atlas', role: 'Navigator' },
29 { id: 3, name: 'Echo', role: 'Engineer' },
30 { id: 4, name: 'Vega', role: 'Scientist' }
31]
32
33const modulesData: StationModule[] = [
34 { id: 'm1', name: 'Life Support', status: 'online' },
35 { id: 'm2', name: 'Navigation', status: 'online' },
36 { id: 'm3', name: 'Science Lab', status: 'maintenance' }
37]
38
39// Simulation of loading state
40const pending = ref(false)
41
42function navigate(page: Page, id?: number) {
43 pending.value = true
44 setTimeout(() => {
45 currentPage.value = page
46 if (id) selectedCrewId.value = id
47 pending.value = false
48 }, 300)
49}
50
51function getCrewMember(id: number) {
52 return crewData.find(c => c.id === id)
53}
54</script>
55
56<template>
57 <div class="nova-lab">
58 <nav class="nav">
59 <button @click="navigate('home')" :class="{ active: currentPage === 'home' }">Home</button>
60 <button @click="navigate('crew')" :class="{ active: currentPage === 'crew' }">Crew</button>
61 <button @click="navigate('modules')" :class="{ active: currentPage === 'modules' }">Modules</button>
62 </nav>
63
64 <div v-if="pending" class="loading">Loading...</div>
65
66 <div v-else>
67 <!-- pages/index.vue -->
68 <div v-if="currentPage === 'home'" class="page">
69 <h1>NOVA LAB - Nuxt 3 Demo</h1>
70 <p>Simulation of file-based routing and useFetch</p>
71 <div class="info-box">
72 <p><strong>pages/</strong> index.vue -> /</p>
73 <p><strong>pages/</strong> crew/index.vue -> /crew</p>
74 <p><strong>pages/</strong> crew/[id].vue -> /crew/:id</p>
75 <p><strong>pages/</strong> modules.vue -> /modules</p>
76 </div>
77 </div>
78
79 <!-- pages/crew/index.vue -->
80 <div v-if="currentPage === 'crew'" class="page">
81 <h1>Crew</h1>
82 <p class="note">Data fetched via useFetch('/api/crew')</p>
83 <div
84 v-for="member in crewData"
85 :key="member.id"
86 class="card clickable"
87 @click="navigate('crew-detail', member.id)"
88 >
89 <strong>{{ member.name }}</strong>
90 <span>{{ member.role }}</span>
91 </div>
92 </div>
93
94 <!-- pages/crew/[id].vue -->
95 <div v-if="currentPage === 'crew-detail' && selectedCrewId" class="page">
96 <button @click="navigate('crew')" class="back-btn">Back</button>
97 <h1>{{ getCrewMember(selectedCrewId)?.name }}</h1>
98 <p>Role: {{ getCrewMember(selectedCrewId)?.role }}</p>
99 <p class="note">Route: /crew/{{ selectedCrewId }}</p>
100 </div>
101
102 <!-- pages/modules.vue -->
103 <div v-if="currentPage === 'modules'" class="page">
104 <h1>Station modules</h1>
105 <p class="note">useAsyncData('modules', () => $fetch('/api/modules'))</p>
106 <div v-for="mod in modulesData" :key="mod.id" class="card">
107 <strong>{{ mod.name }}</strong>
108 <span :class="mod.status">{{ mod.status }}</span>
109 </div>
110 </div>
111 </div>
112 </div>
113</template>
114
115<style scoped>
116.nova-lab {
117 background: #0a0e27;
118 color: #00ff88;
119 min-height: 100vh;
120 padding: 20px;
121 font-family: monospace;
122}
123h1 { color: #00ff88; margin-bottom: 10px; }
124.nav {
125 display: flex;
126 gap: 8px;
127 margin-bottom: 15px;
128 border-bottom: 1px solid rgba(0,180,216,0.3);
129 padding-bottom: 12px;
130}
131.nav button {
132 background: rgba(0,180,216,0.1);
133 color: #00b4d8;
134 border: 1px solid #00b4d8;
135 padding: 8px 18px;
136 border-radius: 6px;
137 cursor: pointer;
138 font-family: monospace;
139}
140.nav button.active { background: #00b4d8; color: white; }
141.page { padding: 10px 0; }
142.card {
143 display: flex;
144 justify-content: space-between;
145 background: rgba(0,180,216,0.08);
146 border: 1px solid #00b4d8;
147 padding: 12px 16px;
148 margin: 6px 0;
149 border-radius: 8px;
150}
151.card.clickable { cursor: pointer; }
152.card.clickable:hover { background: rgba(0,180,216,0.15); }
153.note { color: #666; font-size: 12px; margin-bottom: 10px; }
154.info-box {
155 background: rgba(0,255,136,0.05);
156 border: 1px solid rgba(0,255,136,0.2);
157 padding: 14px;
158 border-radius: 8px;
159 margin-top: 10px;
160 font-size: 13px;
161}
162.info-box p { margin: 4px 0; color: #ccc; }
163.loading { color: #f39c12; text-align: center; padding: 40px; }
164.back-btn {
165 background: none;
166 color: #00b4d8;
167 border: 1px solid #00b4d8;
168 padding: 6px 14px;
169 border-radius: 6px;
170 cursor: pointer;
171 margin-bottom: 10px;
172 font-family: monospace;
173}
174.online { color: #00ff88; }
175.maintenance { color: #f39c12; }
176.offline { color: #e74c3c; }
177</style>Spotted a mistake in this lesson?
Check yourself
Answer the questions from this lesson. Pick an answer to see right away whether it is correct.
1. How does Nuxt 3 create application routing?
2. In which folder does Nuxt 3 place files that automatically become application routes?
These are 2 of 6 questions for this lesson. Solve the rest in the game.
Hands-on tasks in the game
- Code editor
Use onMounted to access window - an object unavailable on the server.
- Horizontal ordering
Arrange the file path for a dynamic route /crew/123 in Nuxt:
- Vertical ordering
Arrange the steps of Incremental Static Regeneration:
- Click in order
Arrange useFetch states in the order of a typical flow:
- Horizontal ordering
Arrange the Nuxt layout structure with the NuxtLink component:
- Vertical ordering
Arrange strategies from best SEO to weakest:
- Click in order
Arrange the commands to create and run a Nuxt 3 project:
- Vertical ordering
Arrange TypeScript concepts in Vue from simplest to most advanced:
- Vertical ordering
Arrange the lifecycle of data fetched by useFetch in Nuxt SSR:
- Horizontal ordering
Arrange the name of Nuxt 3's main configuration file:
- Code editor
Define StationModule and Alert interfaces, type props, emits, and computed.