Nuxt 3 Project Structure and File-Based Routing
pages/, layouts/, components/ auto-import, file naming for nested routes, catch-all routes.
Nuxt 3 Project Structure and File-Based Routing is a free Vue Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is Nuxt 3?
Nuxt 3 is a meta-framework built on Vue 3. It adds server-side rendering, file-based routing, auto-imports, and a server engine so you can build full-stack Vue apps with almost no configuration.
The pages Directory
The pages/ directory drives routing. Each .vue file becomes a route automatically — no manual router config. pages/about.vue maps to /about.
pages/
index.vue -> /
about.vue -> /about
contact.vue -> /contactEnabling the Router
The router activates as soon as a pages/ directory exists. Add <NuxtPage /> in app.vue to render the matched page.
<!-- app.vue -->
<template>
<NuxtPage />
</template>Nested Routes
Folders create nested paths. pages/blog/index.vue serves /blog and pages/blog/archive.vue serves /blog/archive.
pages/
blog/
index.vue -> /blog
archive.vue -> /blog/archiveDynamic Segments With [id]
Wrap a filename in square brackets for a dynamic segment. pages/users/[id].vue matches /users/42, exposing the id as a route param.
// pages/users/[id].vue
const route = useRoute()
const id = route.params.id // "42"Catch-All With [...slug]
The spread form [...slug].vue is a catch-all. It matches any depth of path and is ideal for CMS content or custom 404 handling.
pages/
[...slug].vue -> /a, /a/b, /a/b/c ...Layouts Directory
The layouts/ folder holds wrapper components shared across pages — headers, sidebars, footers. layouts/default.vue wraps every page unless overridden.
<!-- layouts/default.vue -->
<template>
<header>My Site</header>
<slot />
</template>Choosing a Layout
A page picks a layout with definePageMeta. The slot in the layout renders the page content.
<script setup>
definePageMeta({ layout: 'admin' })
</script>Auto-Imported Components
Anything in components/ is auto-imported — no import statement needed. Nested folders prefix the name: components/base/Button.vue becomes <BaseButton />.
components/
TheHeader.vue -> <TheHeader />
base/Button.vue -> <BaseButton />Auto-Imported Composables
The composables/ directory is also auto-imported. Functions exported there — and Nuxt built-ins like useFetch — are usable anywhere without imports.
// composables/useCounter.ts
export const useCounter = () => useState("c", () => 0)
// usable in any component without importingOther Key Directories
Nuxt also defines plugins/ (run at startup), middleware/ (route guards), server/ (API and server logic), and public/ (static assets served as-is).
Quick Check
Test your knowledge of Nuxt structure and routing.
Recap
You learned Nuxt structure:
- pages/ provides file-based routing; folders nest routes.
- [id] is a dynamic segment, [...slug] is a catch-all.
- layouts/ wraps pages; chosen via definePageMeta.
- components/ and composables/ are auto-imported.
Frequently asked questions
Is the “Nuxt 3 Project Structure and File-Based Routing” lesson free?
Yes — the full text of “Nuxt 3 Project Structure and File-Based Routing” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “Nuxt 3 Project Structure and File-Based Routing”?
pages/, layouts/, components/ auto-import, file naming for nested routes, catch-all routes. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Nuxt 3 Project Structure and File-Based Routing” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Nuxt 3 Project Structure and File-Based Routing
- Data Fetching: useFetch and useAsyncData
- Nuxt Server Routes and API Endpoints
- SSR vs SSG vs SPA Mode