PricingLoginStart free
Vue Academy · Lesson

Nuxt 3 Project Structure and File-Based Routing

pages/, layouts/, components/ auto-import, file naming for nested routes, catch-all routes.

Lesson 1 of 413 steps

Nuxt 3 Project Structure and File-Based Routing is a free Vue Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.

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

Enabling 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/archive

Dynamic 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 importing

Other 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.

Answer it in the interactive lesson

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.
Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
42
Lessons
156
Start learning freeView the full course

Frequently Asked Questions

Is the “Nuxt 3 Project Structure and File-Based Routing” lesson free?

Yes — any 3 lessons of the Vue Academy learning path, including “Nuxt 3 Project Structure and File-Based Routing”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

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

  1. Nuxt 3 Project Structure and File-Based Routing
  2. Data Fetching: useFetch and useAsyncData
  3. Nuxt Server Routes and API Endpoints
  4. SSR vs SSG vs SPA Mode
← Back to Vue Academy