Understanding folder / file structure in Nuxt

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.

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, Dev.to and/ or Twitter.