Directory Structure

Watch a free lesson about the Nuxt.js directory structure on Vue School

The directory contains your un-compiled assets such as Stylus or Sass files, images, or fonts.

The Components Directory

The components directory contains your Vue.js Components. You can't use asyncData in these components.

The Layouts Directory

The layouts directory includes your application layouts. Layouts are used to change the look and feel of your page (for example by including a sidebar).

More documentation about Layouts integration

This directory cannot be renamed without extra configuration.

The middleware directory contains your Application Middleware. Middleware lets you define custom functions that can be run before rendering either a page or a group of pages (layouts).

The Pages Directory

The pages directory contains your Application Views and Routes. The framework reads all the .vue files inside this directory and creates the application router.

This directory cannot be renamed without extra configuration.

More documentation about Pages integration

The Plugins Directory

The plugins directory contains your Javascript plugins that you want to run before instantiating the root Vue.js Application. This is the place to register components globally and to inject functions or constants.

More documentation about Plugins integration

The static directory is directly mapped to the server root ( is accessible under ) and contains files that likely won't be changed (e.g. the favicon)

Example: /static/robots.txt is mapped as /robots.txt

This directory cannot be renamed without extra configuration.

The Store Directory

The store directory contains your files. The Vuex Store comes with Nuxt.js out of the box but is disabled by default. Creating an index.js file in this directory enables the store.

This directory cannot be renamed without extra configuration.

More documentation about Store integration

The nuxt.config.js File

The nuxt.config.js file contains your Nuxt.js custom configuration.

This file cannot be renamed without extra configuration.

More documentation about nuxt.config.js integration

The package.json file contains your Application dependencies and scripts.

This file cannot be renamed.

Aliases

Info: Inside your vue templates, if you need to link to your assets or static directory, use and ~/static/your_image.png.