Understanding the nuxt project structure

22 January 2021
4 min read

In our previous tutorial, getting started with nuxt we explored the basics of getting started with Nuxt the intuitive Vue Framework. We started the development of a Server Rendered Page application. The Nuxt team have focused on making this a stream lined purpose.

After you have generated your nuxt application you will see the nuxt project folder structure below.

└──  <project directory >
    ├── assets
    ├── components
    ├── content
    ├── jest.config.js
    ├── layouts
    ├── middleware
    ├── node_modules
    ├── nuxt.config.js
    ├── package.json
    ├── package-lock.json
    ├── pages
    ├── plugins
    ├── README.md
    ├── static
    ├── store
    └── test

If you open your project in an IDE, in my case I prefer to use Webstorm - The smartest JavaScript IDE, your project directory will appear as follows:

Nuxt project structure

Let's go through each of them in order to understand there intended purpose and gain an overview of the framework generated by nuxt for us.

The assets directory

The assets directory is primarily used to store assets such images, fonts, Less, Sass, Stylus file etc. Any files placed in this directory will be compiled by Webpack and made available for use in your application.

Serving optimised and processed media from the assets folder is discussed in further detail in Understanding Nuxt asset serving

The static directory

The static directory is used to store files that you don't require or cannot be compiled by webpack. If you don't want to serve your assets such as images, fonts, styles. All files in this directory are mapped to the server root directly, therefore they accessible under the root URL directly.

Serving media from the static folder is discussed in further detail in Understanding Nuxt asset serving

The pages directory

The pages directory is used to contain the views and the routes of the application. Nuxt will read and convert and convert all the .vue files inside this directory and generate the application router automatically.

The pages directory is discussed in further detail Creating custom pages in nuxt

The layouts directory

The layouts directory is used to store the layout files for your application. Nuxt generates a default.vue by default, you can modify this default layout or add new files to the directory.

The layouts folder is discussed in further detail in How to use Nuxt layouts

The components directory

The components directory is used to store Vue components. You should keep small and reusable components in this directory.

The plugins directory

The plugins directory is used to store your global Javascript functions that you want to run before the root Vue instance is instantiated .

The store directory

The store directory is used to contain the Vuex store. There is no need to install Vuex in Nuxt because it is already installed. It is disabled by default and all you need to do enable it is add an index.js file to this directory.

The middleware directory

The middleware directory is used to store middleware files that are Javascript functions that run before rendering a page or group of pages.

The package.json

The package.json file is used to contain the dependencies and scripts of the Nuxt application.

The nuxt.config.js

The nuxt.config.js file is used to carry out any custom configuration you would like applied to your application.

Learn more and gain an understanding of the Nuxt configuration options

Conclusion

We have discussed and provided a basic overview of the typical directory structure that Nuxt provides out the box. In further tutorial series on using nuxt for web development we will further explore and provide detailed information on how to make use of the Nuxt Directory structure.