Directory Structure

The default Nuxt 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.

  1. mkdir components assets static
  2. touch nuxt.config.js

These are the main directories and files that we use when building a Nuxt application. You will find an explanation of each of them below.

Directory Structure - 图1

Creating directories with these names enables features in your Nuxt project.

Directories

The pages directory

The pages directory contains your application’s views and routes. As you’ve learned in the last chapter, Nuxt reads all the .vue files inside this directory and uses them to create the application router.

Directory Structure - 图2

Learn more about the pages directory

The components directory

The components directory is where you put all your Vue.js components which are then imported into your pages.

With Nuxt 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 will scan and auto import these for you once you have components set to true.

Directory Structure - 图3

Learn more about the components directory

The assets directory

The assets directory contains your uncompiled assets such as your styles, images, or fonts.

Directory Structure - 图4

Learn more about the assets directory

The static directory

The 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)

Directory Structure - 图5

Learn more about the static directory

The nuxt.config.js file

The nuxt.config.js file is the single point of configuration for Nuxt. If you want to add modules or override default settings, this is the place to apply the changes.

Directory Structure - 图6

Learn more about the nuxt.config.js file

The package.json file

The package.json file contains all the dependencies and scripts for your application.

More about the project structures

There are more helpful directories and files, including content, layouts, middleware, modules, plugins and store . As they aren’t necessary for small applications, they are not covered here.

Directory Structure - 图7

To learn about all directories in detail, feel free to read the Directory Structure book.