Project Structure

Each Nuxt folder name has meaning — pages, components, layouts, composables, server, public, and assets all light up features automatically.

4 min read Level 1/5 #nuxt#structure#conventions

What you'll learn

Identify each top-level folder's role
Know what is auto-imported
Read nuxt.config.ts at a glance

Nuxt is convention over configuration. Drop a .vue file into a folder with a special name and Nuxt wires it up — no imports, no router config, no plugin entries.

The Folder Map

my-app/
├─ app.vue              # app entry, mounts <NuxtPage />
├─ nuxt.config.ts       # modules, css, runtime config
├─ pages/               # → routes (file-based router)
├─ layouts/             # → page wrappers (default.vue, etc.)
├─ components/          # → auto-imported components
├─ composables/         # → auto-imported composables
├─ middleware/          # → route middleware (auth, redirects)
├─ plugins/             # → run before app mounts
├─ server/              # → Nitro API + middleware
│  ├─ api/              # → /api/* endpoints
│  └─ middleware/       # → server-side request hooks
├─ public/              # → static assets, served as-is
├─ assets/              # → processed by Vite (images, css, fonts)
└─ utils/               # → auto-imported helper functions

What Is Auto-Imported

Three things stand out:

components/ — every .vue file is registered globally by name.
composables/ — every named export is importable without a statement.
utils/ — same treatment as composables, for non-reactive helpers.

In addition, Vue’s core APIs (ref, computed, watch, lifecycle hooks) and Nuxt’s runtime helpers (useFetch, useState, navigateTo) are auto-imported in any <script setup> block.

nuxt.config.ts at a Glance

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image', '@vueuse/nuxt'],
  css: ['~/assets/css/main.css'],
  devtools: { enabled: true },
})

That single file ties together modules, CSS, devtools, runtime values, and build behavior. We will revisit it in the config lesson.

app.vue — The App Entry →