Understanding folder / file structure in Nuxt
Tags: vue, javascript, tutorial, webdev
Published: 2020-06-09 21:24:39

# Introduction
Starting a new Nuxt project for the first time may seem daunting, understanding the basic folder structure and each folders unique function is important. Each directory and file is designed to help with a different aspect of your project. We’ll be walking through each of them and giving a brief overview.

# Folders, files and their unique functions

## Assets
The `assets` folder in Nuxt, like in Vue is designed to house your Asset URL files. Asset URL files are files you can call in your your CSS and template blocks through standard attributes using a URL. For example an `<img>` tag `src` attribute or a `background-image: url(/**/)` value in CSS. You can also make use of Asset URL files though CSS `@import`'s. What’s special about the assets folder though is that it is run through Webpack, where the URL loader will conditionally inline assets that are smaller than 4kb*, reducing the amount of HTTP requests. By default you’ll be able to access Asset URL files from the following attributes in your templates:
```
{
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
}
```
If you’d like to access Asset files from custom attributes within your templates, you can read more about how to achieve that [here](https://medium.com/@wearethreebears/accessing-nuxt-static-asset-urls-in-custom-attributes-7bafe72a0663).

Asset file URL’s are accessible using `~assets/<file-path>`.

## Components
If you’re familiar with modern day Javascript frameworks, you’ll probably be familiar with the concept of components — Nuxt is no different, the `components` folder is home to your components. You can import your components via `~components/<file-path>`.

## Layouts
Layout’s in Nuxt are essentially wrapper files for your main Application. When creating a new project, the Nuxt CLI will create a single layout: `default.vue`. You may choose to include header, footer and other custom components within this file. For many applications a single layout file may be enough, however you can set up multiple layouts based on your needs, for example should you wish to create a blog layout, you can create a new file within layouts folder, `blog.vue`, you can then take advantage of this layout by using the the layout property in your chosen page file:

```
export default {
   /**/
   layout: ‘blog’
   /**/
}
```

## Middleware
Middleware acts as a guard between routes in your Application, allowing users to only allow access to particular areas of your site if a specified set of criteria is met. For example you may have content that is only available for members, so you could create middleware to require authentication to access those routes. To guard a page with middleware you can create a new `js` file within the `middleware` folder, for example `auth.js`. You’ll then be able to access the `auth.js` middleware by using the `middleware` property in your chosen page file:

```
export default {
    /**/
    middleware: ‘auth'
    /**/
}
```

## Pages
Pages in Nuxt are special components, you may work in them very much in the same way as regular components, however, pages do have some unique properties that set them apart. As well as middleware and layout attributes, pages also have access to the head, asyncData and fetch among others. Possibly the most substantial difference between pages and components though is that pages control your application routes. Upon creating a new Nuxt Application, the CLI will create a single page: `index.vue`, you can think of this as your Home page. Let’s assume you’d like to to add an Articles section to your Application, for this you’d need 2 routes, `/articles` to list your articles and a dynamic `/articles/<file-path>` route to render individual articles. To achieve this in Nuxt, within the `pages` directory, you’d need to create a new folder called `articles`, within the new `articles` folder, create 2 files `index.vue` and `_id.vue`, generating the 2 desired routes `/articles` and `/articles/<file-path>` respectively, with the `id` parameter available to the `/articles/<file-path>` route.

```
- - pages
- - - - articles
- - - - - - index.vue
- - - - - - _id.vue
- - - - index.vue
```

## Plugins
Nuxt allows you to define JavaScript plugins to be run before the root Vue.js Application. This is useful when using your own libraries or external modules. Every time use `Vue.use`, you should create a file in `plugins` directory and add its path to plugins in `nuxt.config.js`.

## Static
The `static` folder in Nuxt is similar to the `assets` folder, in that it houses static files that you can call from your application. However unlike files in the `assets` folder, those in the `static` folder are truly static and will not be ran through Webpack and instead will be simply copied to your `public` folder. For this reason, static files can be accessed as if it were your root directory. Should you wish to access `/static/images/icon.svg` from your template your path would be `/images/icon.svg`.

## Store
The `store` directory, should you choose to use it is where you’d house all of your Vuex files, Vuex is a centralised state management patter / library for Vue which allows you to easily share state between `components` and `pages`. Just like in a standard Vue Application you can use modules, state, getters, mutations and actions.

## Nuxt config
The `nuxt.config.js` files allows you to configure your Nuxt project, from default SEO, to custom URL loaders, global CSS and SCSS and API driven dynamic route generation amongst other things.

# Conclusion
Hopefully this overview of folders, files and their unique functionality within Nuxt has allowed you to become more familiar with Nuxt and in turn I hope you grow in confidence working with the framework.

If you’ve found this article useful, please follow me on [Medium](https://medium.com/@wearethreebears), Dev.to and/ or [Twitter](https://www.twitter.com/wearethreebears).