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 LESS, SASS, or JavaScript.

More documentation about Assets integration

The Components Directory

The components directory contains your Vue.js Components. Nuxt.js doesn't supercharge the data method on these components.

The Layouts Directory

The layouts directory contains your Application Layouts.

This directory can not be renamed.

More documentation about Layouts integration

The Middleware Directory

The middleware directory contains your Application Middleware. The middleware lets you define custom function to be ran before rendering 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 create the router of your application.

This directory can not be renamed.

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.

More documentation about Plugins integration

The Static Directory

The static directory contains your static files. Each file inside this directory is mapped to /.

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

This directory can not be renamed.

More documentation about Static integration

The Store Directory

The store directory contains your Vuex Store files. Vuex Store option is implemented in the Nuxt.js framework. Creating a index.js file in this directory activate the option in the framework automatically.

This directory can not be renamed.

More documentation about Store integration

The nuxt.config.js File

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

This file can not be renamed.

More documentation about nuxt.config.js integration

The package.json File

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

This file can not be renamed.

Aliases

AliasDirectory
~/
~assets/assets
~components/components
~middleware/middleware
~pages/pages
~plugins/plugins
~static/static

Aliases which link to files:

AliasUsageDescription
~storeconst store = require('~store')Import the vuex store instance.
~routerconst router = require('~router')Import the vue-router instance.

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!