Understanding the directory structure

If you have installed a Nuxt project successfully using the create-nuxt-app scaffolding tool, you should get the following default directories and files in your project folder:

-| your-app-name/
---| assets/
---| components/
---| layouts/
---| middleware/
---| node_modules/
---| pages/
---| plugins/
---| static/
---| store/
---| nuxt.config.js
---| package.json
---| README.md

Let's go through each of them and understand what they are intended for in the following sections.

The assets directory

The /assets/ directory is used to contain the assets of your project, such as images, fonts, and Less, Stylus, or Sass files, that will be compiled by webpack. For example, you may have a Less file, as follows:

// assets/styles.less
@width: 10px;
@height: @width + 10px;

header {
  width: @width;
  height: @height;
}

webpack will compile the preceding code into the following CSS for your app:

header {
  width: 10px;
  height: 20px;
}

We will discuss the benefits of serving images...