Nuxt project structure in Vue

Introduction

Nuxt project structure helps organize your app files clearly. It makes building and maintaining your Vue app easier.

When starting a new Nuxt app to keep code organized

When adding pages or components to your Nuxt app

When you want to use Nuxt features like routing and layouts automatically

When working with a team to keep everyone on the same page

When deploying your Nuxt app and need a clear folder setup

Syntax

Vue

nuxt-project/
├── assets/
├── components/
├── composables/
├── layouts/
├── middleware/
├── pages/
├── plugins/
├── public/
├── server/
├── stores/
├── nuxt.config.ts
├── package.json

assets/ holds images, styles, and fonts you want to process.

pages/ auto-creates routes based on Vue files inside.

Examples

This creates routes: /, /about, and dynamic /blog/:id

Vue

pages/
  ├── index.vue
  ├── about.vue
  └── blog/
      └── [id].vue

Layouts wrap pages with common structure like headers or footers.

Vue

layouts/
  ├── default.vue
  └── admin.vue

Reusable UI parts used inside pages or layouts.

Vue

components/
  ├── Navbar.vue
  └── Footer.vue

Code to add global features or libraries before app starts.

Vue

plugins/
  └── axios.ts

Sample Program

This simple Nuxt project has a logo image, a reusable HelloWorld component, a default layout, and two pages: home and about.

Vue

nuxt-project/
├── assets/
│   └── logo.png
├── components/
│   └── HelloWorld.vue
├── layouts/
│   └── default.vue
├── pages/
│   ├── index.vue
│   └── about.vue
├── nuxt.config.ts
└── package.json

Important Notes

Folders like pages and layouts have special meaning in Nuxt.

Use components for reusable parts, not pages.

Keep nuxt.config.ts at the root to configure your app.

Summary

Nuxt project structure organizes your app into clear folders.

Pages folder auto-creates routes for your app.

Layouts wrap pages with common UI parts like headers.