Skip to main content
Nuxt applications have a specific directory structure designed to be easy to understand and use consistently.

​
Root Directory

The root directory of a Nuxt application contains the nuxt.config.ts file. This file is used to configure your Nuxt application.

​
App Directory

The app/ directory is the main directory of your Nuxt application. It contains the following subdirectories:
  • assets/: Website assets that the build tool (Vite or webpack) will process
  • components/: Vue components of your application
  • composables/: Vue composables for your application logic
  • layouts/: Vue components that wrap around your pages and avoid re-rendering between pages
  • middleware/: Code to run before navigating to a particular route
  • pages/: File-based routing to create routes within your web application
  • plugins/: Vue plugins and more at the creation of your Nuxt application
  • utils/: Functions available throughout your application in components, composables, and pages
This directory also includes specific files:
  • app.config.ts: Reactive configuration within your application
  • app.vue: The root component of your Nuxt application
  • error.vue: The error page of your Nuxt application

​
Public Directory

The public/ directory contains public files served at the root. Files here are not modified by the build process. This is suitable for files that need to keep their names (e.g., robots.txt) or likely won’t change (e.g., favicon.ico).

​
Server Directory

The server/ directory contains the server-side code of your Nuxt application. It includes:
  • api/: API routes of your application
  • routes/: Server routes (e.g., dynamic /sitemap.xml)
  • middleware/: Code to run before a server route is processed
  • plugins/: Plugins at the creation of the Nuxt server
  • utils/: Functions for your server code

​
Shared Directory

The shared/ directory contains code shared between your Nuxt application and Nuxt server. This code can be used in both the Vue app and the Nitro server.

​
Content Directory

The content/ directory is enabled by the Nuxt Content module. It creates a file-based CMS using Markdown files.

​
Modules Directory

The modules/ directory contains local modules of your Nuxt application. Modules extend the functionality of your Nuxt application.

​
Layers Directory

The layers/ directory allows you to organize and share reusable code, components, composables, and configurations. Layers within this directory are automatically registered in your project.

​
Nuxt Files

  • nuxt.config.ts: Main configuration file for your Nuxt application
  • .nuxtrc: Configuration syntax for global configurations
  • .nuxtignore: Files to ignore in the root directory during the build phase