The default Nuxt.js application structure is intended to provide a great starting point for both small and large applications. You are free to organize your application however you like and can create other directories as and when you need them.
Let's create the directories and files that do not exist in our project yet.
mkdir components assets static touch nuxt.config.js
These are the main directories and files that we use when building a Nuxt.js application. You will find an explanation of each of them below.
Creating directories with these names enables features in your Nuxt.js project.
The pages directory
pages directory contains your application's views and routes. As you've learned in the last chapter, Nuxt.js reads all the
.vue files inside this directory and uses them to create the application router.
The components directory
components directory is where you put all your Vue.js components which are then imported into your pages.
With Nuxt.js you can create your components and auto import them into your .vue files meaning there is no need to manually import them in the script section. Nuxt.js will scan and auto import these for you once you have components set to true.
The assets directory
assets directory contains your uncompiled assets such as your styles, images, or fonts.
The static directory
static directory is directly mapped to the server root and contains files that have to keep their names (e.g.
robots.txt) or likely won't change (e.g. the favicon)
The nuxt.config.js file
nuxt.config.js file is the single point of configuration for Nuxt.js. If you want to add modules or override default settings, this is the place to apply the changes.
The package.json file
package.json file contains all the dependencies and scripts for your application.
More about the project structures
Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!