Quickstart guide for a new Nuxt.js project

Published on 2018/08/21 Updated on 2018/11

Table of contents

Introduction

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 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.

Alternatives

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

Prerequisites

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 stupendous Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework vuetify
? Choose rendering mode Single Page App
? Use axios module yes
? Use eslint yes
? Use prettier no
? Author name Víctor Adrián

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

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:

<template>
  <v-layout>
    <v-flex text-xs-center>
      <img
        src="/v.png"
        alt="Vuetify.js"
        class="mb-5">
      <blockquote class="blockquote">
        &#8220;First, solve the problem. Then, write the code.&#8221;
        <footer>
          <small>
            <em>&mdash;John Johnson</em>
          </small>
        </footer>
      </blockquote>
    </v-flex>
  </v-layout>
</template>

To this:

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

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

      footer
        small
          em &mdash;John Johnson
</template>


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

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

Inspire page

That’s it!

Now, go write great Vue.js apps!


Conclusion

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