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
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.
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
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
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.
pages directory is discussed in further detail Creating custom pages in nuxt
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.
layouts folder is discussed in further detail in How to use Nuxt layouts
components directory is used to store Vue components. You should keep small and reusable components in this
instance is instantiated .
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.
page or group of pages.
package.json file is used to contain the dependencies and scripts of the Nuxt application.
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
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.