In this article, we will look into some of the Nuxt Cheat Sheet and Nuxt.js Essentials and how we can use them in our application. It’s advisable to understand the basics of Vuejs before moving to Nuxt js. Before we start with our Nuxt Cheat Sheet, let’s learn about Nuxt.
Nuxt.js is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js. The framework is advertised as a “meta-framework for universal applications”
Let’s look at some of the essentials in Nuxt:
Nuxt Cheat Sheet

Installation of Nuxt Js
You can set up a new Nuxt project by using the Nuxt toolkit or by setting it up from scratch.
- Setting up using the Nuxt toolkit:
npx create-nuxt-app <name of project>
cd <name of project>
npm install #installs the project default dependencies
npm run dev # serves the application on a local port
- Setting up from scratch:
Create a `package.json` file and add this code:
{
"name": "stater app",
"scripts": {
"dev": "nuxt"
}
}
After doing this, run npm install --save nuxt
to store the Nuxt dependency and then run npm run dev
to serve the application.
Nuxt Directory Structure
Assets
: This folder contains uncompiled assets and files like sass and lessStatic
: This directory contains unchanged files like pictures and text filesComponents
: This is where we store all our reusable components.layout
: Nuxt also comes with the ability to create multiple layouts for an applicationMiddlewares
: This is where we write functions that will run before a page is loadedPages
: This directory is used by Nuxt for routing.Plugins
: This is where we configure all our Js plugins such as sweetheart, CarouselStore
: All Vuex files are kept here for state management.
Nuxt Components
- Routing: Just like using
router-link
Vuejs for routing, we can also usenuxt-link
it is for routing in a nuxtjs application. We can also route to dynamic routes:
<nuxt-link :to="'/cats' + cat.id">Get Cat By Id</nuxt-link>
- Nuxt-child: This is used to display the child component route in a nested route:
<template>
<div>
<h1>I am the parent view</h1>
<nuxt-child />
</div>
</template>;
- Error Pages: Nuxt gives the ability to create custom error pages for displaying errors in a better format. You can get to display errors based on their error codes and error messages. To create this page, create an
error.vue
page inside the pages directory and store these codes:
<template>
<h1 v-if="error.statusCode === 500">
Something Went wrong
</h1>
<h1 v-else>An error occurred</h1>
<nuxt-link to="/">Home page</nuxt-link>
</template>
<script>
export default {
props: ['error'],
layout: 'error'
}
</script>
- Layouts: You can define custom layouts for different pages. It’s as easy as creating a simple Vuejs component:
<template>
<div class="container">
<nuxt />
</div>
</template>
- Vuex Store: We also have the ability to use the Vuex store in our component for state management. Nuxt also automatically adds Vuex to your project components, meaning that we don’t have to import them. We can use them in this manner :
<template>
<button @click="$store.commit('increment')">
{{ $store.state.counter }}
</button>
</template>
The Nuxt Config File
Nuxt comes with a config file. It is pre-populated based on the config when creating a new Nuxt project using the Nuxt toolkit. This is a sample format of a nuxt.config.js
file:
export default {
css: [
'bulma/css/bulma.css',
'~/css/main.css'
],
generate: {
routes: function () {
return [
'/users/1',
'/users/2',
'/users/3'
];
}
},
loading: '~/components/loading.vue',
head: {
meta: [{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
}
],
link: [{
rel: 'stylesheet',
href: 'https://font.com',
}]
},
plugins: ['~/plugins/vue-notifications']
}
This config helps us configure our application files such as plugins, HTML head elements, style sheets, javascript CDN, etc.
Nuxt Deployment Methods
Nuxt.js lets us choose between three modes to deploy our application:
- Universal,
- Static Generated
- SPA(single page application).
SPA
This mode organizes our project using convention over configuration folder structure and config files. To use this mode, change the mode in the nuxt.config file to spa
.
Static
This mode lets pages get pre-rendered into HTML and have a high SEO and page load score. The content is generated at build time.
Universal
This mode executes your JavaScript on both the client and the server it is also known as SSR(server-side rendering). All routes have high SEO and page load score. Dynamically get routes rendered on the server before being sent to the client.
Conclusion
Thus we have learned and seen Nuxt Cheat Sheet and Nuxt.js Essentials. This will be very helpful as a web developer for your current or upcoming project. If you are looking for Cheat Sheet for other frameworks then you can find out related articles below.
Next.js Cheat sheet: Ultimate Guide to Nextjs
The Ultimate React Cheat Sheet