Understand the NuxtJS directory structure

Recently, I have had a little bit of conflict with NuxtJs from 0, so I also want to understand more about the directory structure used in Nuxt will be like? What is the purpose of each directory? And now let’s find out.

What is NuxtJs?

Nuxt is a framework developed on top of Vue.js for creating better web applications. It is based on the official Vue.js libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel, and PostCSS).

Its main purpose is to make web development robust and to create a more streamlined development process for developers. In essence, it supports different goals (server, non-server or static) and server-side rendering is convertible, especially scalable with a powerful module ecosystem.

Directory Structure in NuxtJs

The default Nuxt.js application architecture is intended to provide a great starting point for both small and large applications. Of course, you are free to organize your apps the way you want.

Assets

The assets folder, just like its name. Assets contain your own un-compiled content, such as JavaScript, SCSS, and images. Nuxt.js uses webpack to process and compile these contents.

Nuxt will configure webpack to handle the ASSET URL files with file-loader and url-loader. The benefit of file-loader is ensuring better file hashes will benefit the overall production process, while url-loader will assist in reducing HTTP requests against ASSET URL files not exceeding one. certain thresholds by setting them as base-64 URLs.

Static

For the contents that will not change, you can put them in the static directory and webpack will ignore the static directory and will not process anything in it (eg favicon file).

In your code, you can then reference files from root (/):

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

Pages

It can be said that this is one of the most important directories of Nuxt, because it will automatically generate any route according to each .vue file in it. The pages directory contains the Views and Routers for your application. It will describe all you need to configure the data and views for a particular route in your application (App Template, Layouts, Pages and HTML Head).

All .vue files in this directory provide options like asyncData, layout, middleware, auth, fetch, head, validate, scrollToTop is all you need to configure data and views for any route. Come on.

In particular, Nuxt CLI by default creates the file pages/index.vue and it serves as the homepage of the application (index page). With this power, it can create SEO friendly URLs.

Middleware

Middleware basically contains custom JavaScript functions that run just before a page or page group is rendered. For example, imagine you want to check if a user has the right credentials to visit a page. In this case, you may be able to create a file called middleware/auth.js containing the code below.

However, just creating a custom function in the middleware directory won’t do any good. You must tell Nuxt.js where you want to apply it, i.e. on all pages or a few selected pages or a single page.

From here, you can use them in the following ways:

• Global middleware – (Via the Nuxt configuration file and affects all routes)

• Layout middleware (Through layouts and affecting grouping of corresponding routes, i.e. pages using that layouts are only viewed and accessed by authenticated users)

• Page middleware (Through each page and influence on the route calling to that page)

Components

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

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

Layouts

Layouts are used to change the look of your apps. An application can have many layouts eg admin layout, guest layout, and registered clients layout. These layouts will be reused in different pages to handle their look (sidebar, menu, footer, etc.). During installation, Nuxt CLI provides default layouts/default.vue layout and is used in all pages.

Each Nuxt generated project has a default.vue file in the layouts directory, with the following minimal sample structure:

The </nuxt> element is very important because it displays the page elements, ie your .vue files from the pages directory.

Of course, you can also create your own custom layout, including the error page. Therefore, to use an instance layout named admin (layouts / admin.vue) at a page post (pages / posts.vue), you would write:

Plugins

In any regular Vue project, you can globally register Vue libraries in the main.js. file. However, this file does not exist in the Nuxt.js application and therefore the plugins directory will do this.

For example, Vue plugin vue-notifications, which allows you to display notifications in your apps. After installing via npm or yarn, create a plugin / vue-notification.js file containing the code below:

Look at the familiar syntax. Then you have to find a way to inform Nuxt.js that you have installed it and want to use this plugin, by editing the nuxt.config.js file. The ~ sign functions like the @ character, meaning it references the root directory:

That’s it then, basically, you want to use any plugin, you will also do the above.

Store

Nuxt comes pre-packaged with Vuex, but it won’t be activated unless you create a Vuex store in the store directory. This is a very special directory for any data-driven project. This is where you can create a data repository, as well as define the nuxtServerInit action. This is also the first life cycle!

When a user first has access to your app, this helps to fill / update the data into the store. It allows you to use the standard modules, state, getters, mutations and actions on the Vue.js app and also maintain your data state throughout the application.

Nuxt Configuration File

The nuxt.config.js file contains your nuxt.config.js custom configuration and allows you to configure your application configuration, these configurations include head titles and associated styles and scripts, middlewares, plugins, authentication, modules and even. APIs.

So through this article I have introduced briefly about the directory structure as well as the uses of each directory in NuxtJs. Through the post, if I have more time, I will learn more about some important parts of it. Thank you for reading my post, thank you!

References: https://nuxtjs.org/guide/directory-structure/