3. Directory Structure

The directory structure

The default Nuxt.js application structure is designed to provide a starting point for small or large projects. You are free to organize your applications and create additional directories when you need them.

Let’s create directories and files that don’t yet exist in our project.

mkdir components assets static
touch nuxt.config.js
Copy the code

These are the home directories and files we used when creating the nuxt.js application. You’ll find an explanation under each of them.

Create directories with these names and enable functionality in your nuxt.js project.

directory

Pages directory

The Pages directory is used to hold your application’s pages and routes. As you learned in the previous section, nuxt.js reads all the.vue files in the directory and creates them as application routes.

Learn more about Pages Directory

Components directory

The Components directory is where you put all vue.js components and then import them into your page.

Create your applications using nuxt.js and import them automatically into your.vue files, which means you don’t have to manually import them into script options. Once your components are set to true, nuxt.js will automatically scan and import them for you.

Learn more about the Components Directory

Assets directory

Assets contains your uncompiled packages, such as your style, image, font files.

Learn more about Assets Dirctory

The static directory

Static maps directly to the server root service and contains files that retain their names (such as robots.txt) or may not change (such as Favicon)

Learn more about static Directory

Nuxt. Config. Js file

The nuxt.config.js file is a single point configuration of nuxt.js. If you want to module or override default Settings, add changes to this file.

Learn more about nuxt.config.js

Package. The json file

The package.json file contains all of the application’s dependencies and scripts.

More on the project structure

Learning more help of directories and files, including the content, layouts, middleware, modules, plugins and store. Since they are not necessary for small projects, they are not discussed here.

For details on all directories, please feel free to read the Directory Structure Book.