DEV Community

Cover image for Nuxt.js Cheat Sheat
Sunil Joshi
Sunil Joshi

Posted on • Updated on • Originally published at wrappixel.com

Nuxt.js Cheat Sheat

In this article, we will looking into some of the Nuxt essential and how we can use them in our application. It’s advisable to understand the basic of Vuejs before moving into Nuxt js. Before we start with our Nuxt Js Cheat Sheet, lets 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"

Lets look at some of the essentials in Nuxt:

Installation of Nuxt Js

You can setup a new Nuxt projectby using the Nuxt toolkit of 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
Enter fullscreen mode Exit fullscreen mode
  • Setting up from scratch:
        Create a `package.json` file and add this code:
    {
    "name": "stater app",
    "scripts": {
      "dev": "nuxt"
    }
    }
Enter fullscreen mode Exit fullscreen mode

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 less
  • Static : This directory contains unchanged files like pictures and text files
  • Components: This is where we store all our reusable components.
  • layout : Nuxt also comes with the ability to create multiple layouts for an application
  • Middlewares : This is where we write functions that will run before a page is loaded
  • Pages : This directory is used by Nuxt for routing.
  • Plugins : This is where we configure all our Js plugins such as sweetalert, Carousel
  • Store : All Vuex files are kept here for state management.

Nuxt Components

  • Routing: Just like using router-link in Vuejs for routing, we can also use nuxt-link 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>
Enter fullscreen mode Exit fullscreen mode
  • Nuxt-child : This is used to display child component route in a nested route:
    <template>
      <div>
        <h1>I am the parent view</h1>
        <nuxt-child />
      </div>
    </template>;
Enter fullscreen mode Exit fullscreen mode
  • Error Pages: Nuxt gives the ability tp 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 this 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>
Enter fullscreen mode Exit fullscreen mode
  • Layouts: You can define custom layouts for different pages. It’s as easy as create a simple vuejs component:
    <template>
      <div class="container">
        <nuxt />
      </div>
    </template>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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']
    }
Enter fullscreen mode Exit fullscreen mode

This config helps us configure our application files such as plugins, html head element, style sheets, javascript CDN etc.


Sponsored:

NuxtJs


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 execute your JavaScript on both the client and the server it is also know 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 client.

Conclusion

I hope you liked this article and this article has been useful to you. Please check out VueJs Admin Dashboard and Website Templates to save you Time, Money and Energy at AdminMart and WrapPixel. Thanks for Reading!

Top comments (4)

Collapse
 
lavikara profile image
Temi Kara

Hi, nice article 👍
but i noticed something, the error.vue file should be in the layouts directory and not in the pages directory.

Collapse
 
wisdom132 profile image
Wisdom Ekpot

I get what you are saying..but most developer prefer sending out the errors as a prop to thier child components...i really think its neater that way...

Collapse
 
lavikara profile image
Temi Kara

Hmmmm, if you say so.

Collapse
 
suniljoshi19 profile image
Sunil Joshi

Thanks Wisdom!