Directory Structure
The default Nuxt.js application structure is intended to provide a great starting point for both small and large applications. Of course, you are free to organize your application however you like.
Directories
The Assets Directory
The assets directory contains your un-compiled assets such as Stylus or Sass files, images, or fonts.
More documentation about Assets integration
The Components Directory
The components directory contains your Vue.js Components.
Components in this directory will not have access to asyncData.
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
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).
More documentation about Middleware integration
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
The static directory is directly mapped to the server root (/static/robots.txt is accessible under http://localhost:3000/robots.txt) 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.
More documentation about Static integration
The Store Directory
The store directory contains your Vuex Store 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
The package.json file contains your Application dependencies and scripts.
This file cannot be renamed.
Aliases
| Alias | Directory |
|---|---|
~ or @ |
srcDir |
~~ or @@ |
rootDir |
By default, srcDir is the same as rootDir.
Info: Inside your vue templates, if you need to link to your assets or static directory, use ~/assets/your_image.png and ~/static/your_image.png.
Contributors
alexchopin
Atinux
manniL
pi0
mamboer
sotayamashita
Haeresis
andrewjrhill
rahaug
ideabrian
kevinashworth
jhheider
jakubsacha
rayrutjes
ashwinkshenoy
denniel-sadian
kevinmarrec
jbruni
detrohuttCaught a mistake or want to contribute to the documentation? Edit this page on GitHub!
