NuxtJs Directory Structure

Nuxt is a progressive framework based on Vue.js to create modern web applications. I found it quite challenging to wrap my head around how Nuxt’s directory structure works during my early days of writing Vue.js using the Nuxt framework.

This article aims to explain the uses of all the folders and files in the Nuxt project director.

Folders and files in Nuxt

Assets

The assets directory contains your un-compiled assets such as Stylus or Sass files, images, or fonts. ASSET URL files are those you access within your code blocks or CSS through standard properties. Examples of such are the <img> tag src attribute, background-image: url(/**/) value in CSS and the CSS @import. They are all resolved as module dependencies and are handled by webpack.

Nuxt configures webpack to handle ASSET URL files using file-loader and url-loader. The benefit of file-loader is to ensure better hashing that will be beneficial to overall efficiency in production while url loader assists to reduce HTTP requests for ASSET URL files that are not above a given threshold by making them inline as a base-64 data URL. The url-loader falls back to file loader whenever the file is above the threshold.

Note

In Nuxt 1.0, Asset file URLs are accessible using ~/<file-path>. However, starting from Nuxt 2.0 the ~/ alias are not resolved correctly in your CSS files. You must use ~assets/<file-path> (without a slash) or the @ alias in url CSS references, i.e. background: url(“~assets/banner.svg”)

Components

Components are independent and reusable bits of code. To import a component saved as BarChart (i.e components/BarChart.vue) and subsequently, invoke it by the name BarChart within a page (i.e pages/posts.vue), you write:

import BarChart from "~/components/BarChart";

export default {
    components: { 
    	BarChart
    },
}

Be aware that components in this directory do not have access to asyncData.

Layouts

Layouts are used to change the look and feel of your application. A single application may have numerous layouts e.g admin layout, guest layout, and registered clients layout. These layouts are to be reused in different pages to handle their look and feel (sidebar, menu bar, footer and so on). During installation, Nuxt CLI provides default (i.e layouts/default.vue layout and is used in all pages.

To use for instance a layout named admin (i.e layouts/admin.vue) in a page (i.e. pages/posts.vue) , you write:

export default {
   /**/
   layout: ‘admin’
   /**/
}

Middleware

Middleware lets you define custom functions that can be executed before rendering either a page or a group of pages (layouts).

Middleware provides a convenient mechanism for filtering page rendering requests within the application. For example, a middleware that verifies if the user of your application is authenticated before a page or a group of pages will be shown. Additional middleware can be written to perform a variety of tasks besides authentication. A logging middleware might log all page rendering requests in your application.

A middleware log (i.e middleware/log.js) can be registered to be executed before the page post (i.e pages/post.vue) is executed by:

export default {
    /**/
    middleware: ‘log'
    /**/
}

Pages

The pages directory contains your application’s Views and Routes. The pages directory section describes all you need to configure data and views for a specific route in your Nuxt.js Application (App Template, Layouts, Pages and HTML Head).

All .vue files in the pages directory provides the options; asyncData, layout, middleware, auth, fetch, head, validate, scrollToTop that are all you need to configure data and views for any route. You can read more about these options here.

The Nuxt CLI creates the index.vue (i.e pages/index.vue) by default and it serves as the application’s home page (index page).

Plugins

The plugins directory contains your Javascript plugins that you want to run before instantiating the root Vue.js Application. This is useful when using your personal libraries or external modules. This is where components, configurations, mixins are added so that they will be globally available and running all over the application.

Static

If you don’t want to use Webpack assets from the assets directory, you can create and use the static directory (in your project root folder). This is where you place files that likely won’t be changed (e.g. the favicon).

In your code, you can then reference these files relative to the root (/):

See the difference in the access syntax between static directory and assets directory:

<!-- How to access static image from static directory --> 
<img src="/image.jpg"/> 

<!-- How to access webpacked image from assets directory --> 
<img src="~/assets/image.jpg"/>

Store

The store is deactivated by default and is meant to contain the application’s Vuex Store files. To activate store, one needs to create an index.js file within the directory (i.e store/index.js).

It allows you to use modules, state, getters, mutations and actions just like in a standard Vue.js application.

You need to really learn how to use the store as it is ultimately important for managing the state of every big application.

Nuxt config

The nuxt.config.js file contains your Nuxt custom configuration and allows you to configure your application, these configuration includes head title and associated styles and scripts, middlewares, plugins, authentication, modules, and even API routes among others.

Originally published at https://nuhuibrahim.com.