0Pricing
Vue Academy · Lesson

Nuxt 3 Project Structure and File-Based Routing

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

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

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