Nuxt Directory Structure

Learn about the directory structure of a Nuxt application and how to use it.

Nuxt applications have a specific directory structure that is used to organize the code. This structure is designed to be easy to understand and to be used in a consistent way.

Root Directory

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

App Directory

The following directories are related to the universal Nuxt application:

  • assets/: website's assets that the build tool (Vite or webpack) will process
  • components/: Vue components of the application
  • composables/: add your Vue composables
  • layouts/: Vue components that wrap around your pages and avoid re-rendering between pages
  • middleware/: run code before navigating to a particular route
  • pages/: file-based routing to create routes within your web application
  • plugins/: use Vue plugins and more at the creation of your Nuxt application
  • utils/: add functions throughout your application that can be used in your components, composables, and pages.

This directory also includes specific files:

  • app.config.ts: a 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 is the directory that contains the public files of the Nuxt application. Files contained within this directory are served at the root and are not modified by the build process.

This is suitable for files that have to keep their names (e.g. robots.txt) or likely won't change (e.g. favicon.ico).

Server Directory

The server/ directory is the directory that contains the server-side code of the Nuxt application. It contains the following subdirectories:

  • api/: contains the API routes of the application.
  • routes/: contains the server routes of the application (e.g. dynamic /sitemap.xml).
  • middleware/: run code before a server route is processed
  • plugins/: use plugins and more at the creation of the Nuxt server
  • utils/: add functions throughout your application that can be used in your server code.

Shared Directory

The shared/ directory is the directory that contains the shared code of the 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 is used to create a file-based CMS for your application using Markdown files.

Modules Directory

The modules/ directory is the directory that contains the local modules of the Nuxt application. Modules are used to extend the functionality of the 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 file is the main configuration file for the Nuxt application.
  • .nuxtrc file is another syntax for configuring the Nuxt application (useful for global configurations).
  • .nuxtignore file is used to ignore files in the root directory during the build phase.
Was this helpful?