Nuxt 3 — podstawy

Nuxt 3 to meta-framework zbudowany na Vue 3, który daje SSR, SSG, routing plikowy i wiele więcej — od razu, bez konfiguracji. Można go porównać do systemu autopilota stacji NOVA LAB — wszystko jest skonfigurowane i gotowe do działania.

Tworzenie projektu Nuxt 3

1npx nuxi@latest init nova-lab-app
2cd nova-lab-app
3npm install
4npm run dev

Routing plikowy (File-Based Routing)

W Nuxt 3 nie konfigurujesz routera ręcznie. Struktura plików w folderze

pages/

automatycznie tworzy trasy:

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/path

Plik

index.vue

to strona główna danego katalogu. Pliki z nawiasami kwadratowymi

[id].vue

to parametry dynamiczne.

Layouts

Layouty definiują wspólną strukturę stron (nawigacja, stopka):

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 &copy; 2087</footer>
15  </div>
16</template>

Strony automatycznie używają layoutu

default

. Można zmienić layout na konkretnej stronie:

1<!-- pages/dashboard.vue -->
2<script setup lang="ts">
3definePageMeta({
4  layout: 'admin'
5})
6</script>

useFetch — pobieranie danych

useFetch

to composable Nuxta do pobierania danych. Działa zarówno na serwerze (SSR) jak i na kliencie:

1<script setup lang="ts">
2interface CrewMember {
3  id: number
4  name: string
5  role: string
6}
7
8// useFetch działa na serwerze i kliencie
9const { data: crew, pending, error } = await useFetch<CrewMember[]>(
10  '/api/crew'
11)
12</script>
13
14<template>
15  <div v-if="pending">Ładowanie...</div>
16  <div v-else-if="error">Błąd: {{ 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

automatycznie:

Wykonuje request na serwerze podczas SSR
Serializuje dane i przesyła je do klienta (unika podwójnego fetchowania)
Udostępnia stany
```
pending
```
,
```
error
```
,
```
data
```
,
```
refresh
```

useAsyncData — bardziej elastyczne

useAsyncData

daje pełną kontrolę nad logiką pobierania danych:

1<script setup lang="ts">
2const { data: stats } = await useAsyncData('station-stats', () => {
3  return $fetch('/api/stats')
4})
5
6// Z transformacją danych
7const { data: modules } = await useAsyncData(
8  'modules',
9  () => $fetch('/api/modules'),
10  {
11    transform: (data) => data.filter(m => m.active),
12    watch: [selectedSector]  // automatyczne odświeżanie
13  }
14)
15</script>

Auto-imports

Nuxt 3 automatycznie importuje:

Composables Vue (
```
ref
```
,
```
computed
```
,
```
watch
```
...)
Composables Nuxt (
```
useFetch
```
,
```
useRoute
```
,
```
useState
```
...)
Komponenty z
```
components/
```
Utility z
```
utils/
```
i
```
composables/
```

Nie trzeba pisać

import { ref } from 'vue'

— Nuxt robi to za nas!

1<script setup lang="ts">
2// Bez importów! Nuxt auto-importuje ref, computed, useFetch
3const count = ref(0)
4const doubled = computed(() => count.value * 2)
5
6const { data } = await useFetch('/api/data')
7</script>

Struktura projektu Nuxt 3

1nova-lab-app/
2├── pages/          # Routing plikowy
3├── components/     # Auto-importowane komponenty
4├── composables/    # Auto-importowane composables
5├── layouts/        # Layouty stron
6├── server/         # API endpoints (Nitro)
7│   └── api/        # /api/* routes
8├── public/         # Pliki statyczne
9├── app.vue         # Root komponent
10└── nuxt.config.ts  # Konfiguracja Nuxt

Server API (Nitro)

Nuxt 3 używa Nitro do obsługi endpointów API:

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})

Vai a CodeWorlds→