Ultimate Guide To Develop an Universal Applications With Nuxt.js

If you are a developer who has just picked up the Nuxt.js framework and are completely blown away by the sheer number of folders it contains and the fact that most of them are empty with nothing but a readme file. then this article is intended to make things simpler and clear all your doubts, by shedding light on how each of these files can help you in your Nuxt project.After implementing a few projects with this framework, one can then proceed to document their understanding of how these folders work together to bring get a server-rendered Vue application to work beautifully.

The diagram above is based on the SSR View Guide and extended with Nuxt.js in mind. At a glance, one can notice different folders in the ‘Your Universal Application Code’ section and how the code is then packaged by Nuxt and then bundled by Webpack. This article is neither a tutorial nor a complete guide to SSR Nuxt, it is intended to guide developers as to what goes into the of Universal application development. Although the modules, server middleware, and plugins appear at the top of the diagram, it is best if we start with the ‘Store’ first!

The Vuex Store ‘/store’

Although Nuxt comes pre-packaged along with Vuex, it is enabled only if you make a Vuex store in the ‘/store’ directory and create the store. This is a very special directory for any data-driven project, where one can opt to create a datastore and also choose to define the nuxtServerInit action. It's also the very first life cycle hook.const createStore = () => { return new Vuex.Store({ ... })}When a user accesses your application for the first time, it allows them to fill/update the store. It also maintains the state of your data throughout the application.

Route Middleware ‘/middleware’

There are three types of route middleware available in Nuxt. They are all defined in a central location, namely the ‘/middleware’ directory. From there, one can use them in the following ways -

Global Middleware (input via Nuxt configuration and affects all routes)

// nuxt.config.jsexport default { router: { middleware: 'authenticated' },}

Layout Middleware (input via layouts and assigns a group of matching routes, i.e. some pages can only be accessed by authenticated users)

// layouts/default.vueexport default { middleware: 'authenticated-basic-plan-user'}

Page Middleware (entered via page component and assigns only one route)

// pages/index.vueexport default { middleware: 'subscribed'}The middleware above are all treated in the exact order that they are mentioned in, meaning that their priorities are non-negotiable. That is why it is crucial to think carefully and plan your application carefully in order to make the most of this feature.

Vue Components

There are three directories in which .vue files are created in a Nuxt project.

Page Components ‘/pages’

This is perhaps the most important directory of all directories which are responsible for housing views and application routes. The Vue.js components created here are directly converted into application routes. The most profound capability of page components has to do with the way they deal with dynamic routes. One can use them to generate URLs that are SEO-optimized and data-driven. Dynamic routes are generated based on the structure of your directory under ‘/pages’.In addition, Nuxt adds three special methods of on-page components that are not available anywhere else. They are -

validate (),
asyncData (), and
fetch ().

// pages/index.Vueexport default {validate() { // validates dynamic URL parameters // verifies the availability of the data }, asyncData() { // sets component data },fetch() { // doesn't set component data, but // fetches further contextual data }}

Layout Components ‘/layouts’

Layout components feed into the structural aspects of your application. The common components found on all pages are created here (such as the main menu, the submenu, the header, the footer, etc.). They are in the ‘/layouts’ directory. One can be as creative as they want here, after all, they are Vue.js components. It is crucial that you remember to add <nuxt /> to the main content area of the presentation.<template><div><nuxt/></div></template>Incorporate route-middleware and store data-state into the layout component in order to build perfect “who-sees-what” type features for any number of user-types under varied circumstances. With all this, a developer can achieve a bit more than with just a custom user interface.

Components View.js ‘/components’

These are regular, but versatile Vue components. They are created in the ‘/components’ directory and are not overloaded with special methods such as in the case of page components. But they allow you to structure and organize your business logic in an efficient manner. They also hide the heavy tags of page and layout components. This eventually helps in making your codebase more manageable.

Assets

Webpacked Assets ‘/assets’

Assets such as JavaScript files, custom fonts, and CSS files are all processed by Webpack using specific loaders such as the css-loader, file loader, URL loader, etc, depending upon the type of file. For instance, if you write your CSS code in .scss or .less format, Webpack will process these files using a loader and an output compiled .css file, which can then be used by the browser. You can even customize your nuxt.config.js file to tell Webpack to reduce and optimize the asset folder images as part of your build process. Once Webpack has processed the files, it associates hash code.

Static Assets ‘/static’

For assets that will not change, you can safely put them in the static folder. Webpack ignores the static folder and will not deal with the contents of this folder no matter what.

Modules, serverMiddleware, and Plugins

They are all defined by their respective paths in the Nuxt configuration. They are also accessible globally throughout the Nuxt application.

Modules ‘/modules’

A new Nuxt application always comes pre-packaged with Vue, Vue Router, Vuex, Vue Server Rendered and also Vue Meta, by default. But you may be wondering about features such as Sitemap, Google Analytics, Progressive Web Apps, and others. If you plan to use modules, then yes, you're right, that's where the power of the Nuxt modules comes in.

serverMiddleware ‘/api’

ServerMiddleware can be considered as an extension point for your application. ServerMiddleware are unique and incredibly helpful as they offer access to the underlying instance of the ‘connect’ framework. Because Nuxt uses ‘connect’ to deliver the application, it allows custom functions to be attached to the underlying request pipeline in the form of middleware.ServerMiddleware can be used to -

create an API endpoint in order to connect to external applications,

create an API endpoint in order to send an email to users from your Nuxt application, and

access the request and modify it in any way, well before it reaches Nuxt.

It is, however, important to note that empty pre-filled folders do not exist for serverMiddleware and its modules. One creates them as and when they are needed.

Plugins ‘/plugins’

One can choose to make their existing Vue mixins, directives, and filters work harder just by converting them into Nuxt plugins. They can be placed in the ‘/plugins’ directory which is provided with a freshly installed instance of Nuxt. However, most of the time, you will eventually end up adding external packages or Vue libraries as Nuxt plugins. One can embed them in Nuxt simply by using the Vue.use () syntax. Some of the plugins that most developers always end up using in their Nuxt implementation are Vue Bootstrap, form validation, the font-awesome icon set, and axios.This is not the end of the plugins. One can opt to write custom plugins and add them to the root of the application at any point in time. They are available globally in the Nuxt application. This is one of the most preferred techniques used by developers to add custom GreenSock or Scroll-Magic transitions to the project and use them in the Vue ‘/components’ and Page ‘/pages’ components.

Modules, Middleware Server and Plugins, In A Nutshell

Once you have set up the desired features, you build your application using npm run build. Nuxt then packages your application. index.js is the main entry point that matters to app.js. App.js sets the instance of Root View. If you look closely in .nuxt / App.js, it's just a Vue component. Once this Vue root instance is set, the client entry (client.js) creates a new instance from it and mounts it to the DOM element. End users see a new instance of an application in their browsers, because of the fact that the server entry (server.js) creates a new instance of the application for each request.Finally, Webpack groups your application for the code to run on both the client and server-side. The server group renders server-side and the client group hydrates static HTML markup in the browser. This makes it a dynamic DOM that can react to changes in client-side data. Nuxt does all this for us so that there is no need for writing this configuration manually. The last two steps - packaging and grouping are quite complex. But Nuxt is great, in that it hides all that from you, allowing you to focus on the code of the application which ultimately delivers the final application.ConclusionThis high-level overview of the application's code structure will allow developers new to Nuxt, to progress further in their learning path of the Nuxt framework.This article, however, sheds light on only one of many alternative perspectives aimed at helping developers (who are beginners at Nuxt) understand how everything fits into a typical Nuxt application.

Ideas2IT Team