Nuxt 3-projektets struktur och filbaserad routing
pages/, layouts/ och automatisk import från components/, filnamn för nästlade routes och catch-all-routes.
Nuxt 3-projektets struktur och filbaserad routing är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad är Nuxt 3?
Nuxt 3 är ett meta-ramverk byggt på Vue 3. Det lägger till rendering på serversidan, filbaserad routing, automatiska importer och en servermotor, så att Du kan bygga fullstack-appar med Vue med nästan ingen konfiguration.
Katalogen pages
Katalogen pages/ styr routingen. Varje .vue-fil blir automatiskt en route – ingen manuell routerkonfiguration behövs. pages/about.vue motsvarar /about.
pages/
index.vue -> /
about.vue -> /about
contact.vue -> /contactAktivera routern
Routern aktiveras så snart en pages/-katalog finns. Lägg till <NuxtPage /> i app.vue för att rendera den matchande sidan.
<!-- app.vue -->
<template>
<NuxtPage />
</template>Nästlade routes
Mappar skapar nästlade sökvägar. pages/blog/index.vue hanterar /blog och pages/blog/archive.vue hanterar /blog/archive.
pages/
blog/
index.vue -> /blog
archive.vue -> /blog/archiveDynamiska segment med [id]
Omslut ett filnamn med hakparenteser för att skapa ett dynamiskt segment. pages/users/[id].vue matchar /users/42 och gör id:t tillgängligt som en route-parameter.
// pages/users/[id].vue
const route = useRoute()
const id = route.params.id // "42"Catch-all med [...slug]
Spridningsformen [...slug].vue är en catch-all. Den matchar sökvägar på valfritt djup och passar bra för CMS-innehåll eller anpassad 404-hantering.
pages/
[...slug].vue -> /a, /a/b, /a/b/c ...Katalogen layouts
Mappen layouts/ innehåller omslutande komponenter som delas av flera sidor – sidhuvuden, sidofält och sidfötter. layouts/default.vue omsluter varje sida om inget annat anges.
<!-- layouts/default.vue -->
<template>
<header>My Site</header>
<slot />
</template>Välja en layout
En sida väljer layout med definePageMeta. Slotten i layouten renderar sidans innehåll.
<script setup>
definePageMeta({ layout: 'admin' })
</script>Automatiskt importerade komponenter
Allt i components/ importeras automatiskt – ingen import-sats behövs. Kapslade mappar lägger till ett prefix i namnet: components/base/Button.vue blir <BaseButton />.
components/
TheHeader.vue -> <TheHeader />
base/Button.vue -> <BaseButton />Automatiskt importerade composables
Katalogen composables/ importeras också automatiskt. Funktioner som exporteras där – och Nuxts inbyggda funktioner som useFetch – kan användas var som helst utan importer.
// composables/useCounter.ts
export const useCounter = () => useState("c", () => 0)
// usable in any component without importingAndra viktiga kataloger
Nuxt definierar även plugins/ (körs vid start), middleware/ (route guards), server/ (API- och serverlogik) och public/ (statiska resurser som serveras oförändrade).
Snabbtest
Testa Dina kunskaper om Nuxts struktur och routing.
Sammanfattning
Du lärde Dig Nuxts struktur:
- pages/ tillhandahåller filbaserad routing; mappar nästlar routes.
- [id] är ett dynamiskt segment och [...slug] är en catch-all.
- layouts/ omsluter sidor och väljs via definePageMeta.
- components/ och composables/ importeras automatiskt.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Nuxt 3-projektets struktur och filbaserad routing” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Nuxt 3-projektets struktur och filbaserad routing”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Nuxt 3-projektets struktur och filbaserad routing”?
pages/, layouts/ och automatisk import från components/, filnamn för nästlade routes och catch-all-routes. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Nuxt 3-projektets struktur och filbaserad routing”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Nuxt 3-projektets struktur och filbaserad routing
- Datahämtning: useFetch och useAsyncData
- Nuxt-serverroutes och API-endpoints
- SSR kontra SSG kontra SPA-läge