Quickstart guide for a new Nuxt.js project

Published on 2018/08/21 ‚óŹ Updated on 2019/04

Table of contents


If you are into Vue.js it’s hard not to bump into Nuxt.js.

But what is it? Well, on their page they say:

Nuxt — Universal Vue.js Applications
That means you can have your SPA (Single Page Application) + SSR (Server Side Rendering).

As I see it, it’s an opinionated framework for building web apps on top of Vue.js.
A convention over configuration type of framework, if you will.

Knowing your way around vue-cli apps first, will certainly help you understand what Nuxt.js does for you.

Nevertheless, what really caught my eye was the fact that it can be used as a Static Site Generator too!

Right now, I’m exploring the idea of using it as the basis for this blog, because:

  • I’m already a big fan of Vue.js.
  • I’m already pretty good at Vue.js development.
  • I want to leverage my knowledge of Vuetify and Material Design to make it usable and pretty.
  • I’m finding it difficult to write articles that mix Vue.js, Vuetify and D3 using Hugo.

So, what follows is a step-by-step guide into getting a new Nuxt.js app up and running with Vuetify, Pug and Sass support.

If you are looking for a guide on how to setup a normal vue-cli application, check this one out: Quickstart guide for a new Vue.js project.


If you are exploring alternatives in this space, here is a couple of links for you:

  • Gridsome — Build blazing fast websites for any CMS or data with Vue.js
  • Ream — Universal Vue.js Applications Made Simple
  • Saber.js — A minimalistic framework for building static website using Vue.js


Install Node.js, Yarn and vue-cli

Generate a new project

To create a new Nuxt.js app, type this in your terminal:

yarn create nuxt-app my-app

This is equivalent to:

yarn global add create-nuxt-app
create-nuxt-app my-app

If the command create-nuxt-app is not available to you in the CLI, don’t forget to asdf reshim nodejs.

It’ll ask you some questions like:

? Project name my-app
? Project description My awesome Nuxt.js project
? Use a custom server framework none
? Choose features to install Progressive Web App (PWA) Support, Linter / Formatter, Axios
? Use a custom UI framework vuetify
? Use a custom test framework jest
? Choose rendering mode Single Page App
? Author name lobo_tuerto
? Choose a package manager yarn

I choose the rendering mode as Single Page App instead of Universal because I want a statically generated site, and don’t want to depend on a Node.js environment for my app to work.

Start the development server:

cd my-app/
yarn dev

Now, open your browser and visit: http://localhost:3000.

You’ll see something like:

Nuxt.js + Vuetify page

Adjust ESLint rules

Add these lines to the rules key in the .eslintrc.js file:

'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'space-before-function-paren': ['error', 'always'],
'no-multiple-empty-lines': [2, { max: 2 }]

The reason for these changes, is pure personal style.
I usually leave two consecutive blank lines between some elements inside my .js and .vue component files.

For example between import sections and following code for .js files.
Or between <template>, <script> and <style> sections for .vue files.

Add Pug and Sass support

I like writing my Single File Components using Pug and Sass
And I recommend you do the same, betting on them is such a no-brainer.

yarn add pug pug-plain-loader node-sass sass-loader --dev

Pug rewrite example

Just see how concise and lean is the Pug version compared to its HTML counterpart.

For pages/inspire.vue, from this:

    <v-flex text-xs-center>
      <blockquote class="blockquote">
        &#8220;First, solve the problem. Then, write the code.&#8221;
            <em>&mdash;John Johnson</em>

To this:

<template lang="pug">
    img(src="/v.png" alt="Vuetify.js").mb-5

        &#8220;First, solve the problem.
        Then, write the code.&#8221;

          em &mdash;John Johnson

<style lang="sass" scoped>
  background-color: #bf0051

Point your browser to: http://localhost:3000/inspire and you’ll see:

Inspire page

That’s it!

Now, go write great Vue.js apps!


Nuxt.js offers an interesting —and opinionated— way for implementing Vue.js apps.

I’ll definitely keep poking around and see if it can cover all the use cases for the next iteration of my blog.

— lt

Feedback & comments

Get in touch on Twitter

Or by good ol' email at adriandcs@gmail.com