Vue JS

Build a Server-Side Rendered Vue App with Nuxt.js

In this tutorial, I will be showing how to build a static website with Nuxt.js. For the purpose of demonstration, well be building a personal portfolio website.

Social Media Digital Marketing & Communication Advisor. Community Manager

Published · Jun 13 2019

In this tutorial, I will be showing how to build a static website with Nuxt.js. For the purpose of demonstration, we’ll be building a personal portfolio website.

  

What is Nuxt.js
Nuxt.js is a framework for creating server-rendered Vue.js Applications. It was inspired by Next.js. Its main scope is UI rendering while abstracting away the client/server distribution. Nuxt.js comes with a lot of features to help you in your development between the client side and the server side such as asynchronous data, middleware, layouts, etc.

  

In addition to building server rendered applications, Nuxt.js can also be used to build static generated Vue.js applications (which will be our focus in this tutorial).
. . .

How it Works
In addition to using Vue.js, Nuxt.js uses the following libraries to create a rich web application development:
Vue-Router
Vuex (included only when using the store option)
Vue-Meta
All configured for you, so you don’t have to spend time installing and setting up these libraries yourself. Under the hood it uses Webpack with vue-loader and babel-loader to bundle, code-split and minify your code.
Nuxt.js tries to remain minimal as possible by keeping a total size of only 28kb min+gzip(31kb with vuex).

The image below shows a broad overview of how Nuxt.js works:

  

Let’s now build ourselves a static portfolio website with Nuxt.js.

Create a Nuxt.js Project
We’ll be using the starter template provided by the Nuxt.js team. We’ll install it using the Vue CLI, so you need to first install the Vue CLI in case you don’t have it installed already:
npm install -g vue-cli

Once installed, you can move on to creating Nuxt.js project with it:
vue init nuxt/starter portfolio

We can the project portfolio, you can name it whatever you like. Next, we need to install the dependencies:
cd portfolio
npm install

With the dependencies installed, we can now lauch our project:
npm run dev

The application is now running on http://localhost:3000. If everything went well, you should see a screen as the image below:
  
Before we dive in to code, let’s take a moment to define what our portfolio website will entail. The portfolio website will contain four (4) pages:
Hompage
About page
Projects page
Contact page

Creating Master Layout
We’ll start by creating a master layout which all our pages will inherit. We’ll be using Bulma as our CSS framework. So we need to pull it into our project. To do so, open nuxt.config.js which is Nuxt.js config file and paste the code below within the linkobject that is inside the head object:
// nuxt.config.js

{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700' },

In addition to pulling in Bulma, we also pull in a Google font.

Within the layouts folder, there is a default.vue file. Open it and replace it content with:
<!-- layouts/default.vue -->

<template>
  <div>
    <nuxt/>
  </div>
</template>

<style>
  html {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  }
</style>

<nuxt/> will be replaced with the actual content of the page rendered.

Creating Navbar Component
Let’s create a navbar component, so we can add it to the master layout. Within the components folder, create a new Navbar.vue file and paste the code below into it:
<!-- components/Navbar.vue -->

<template>
  <div class="container">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="/">Portfolio</a>
        <button class="button navbar-burger">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <nuxt-link class="navbar-item" to="/">Home</nuxt-link>
          <nuxt-link class="navbar-item" to="/about">About</nuxt-link>
          <nuxt-link class="navbar-item" to="/projects">Projects</nuxt-link>
          <nuxt-link class="navbar-item" to="/contact">Contact</nuxt-link>
        </div>
      </div>
    </nav>
  </div>
</template>

We can now add the navbar to the master layout. Open layouts/default.vue and update as below:
<!-- layouts/default.vue -->

<template>
  <div>
    <navbar></navbar>
    <nuxt/>
  </div>
</template>

<script>
  import Navbar from '../components/Navbar'

  export default {
    components: {
      Navbar
    }
  }
</script>

<style>
  html {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  }
</style>

Creating The Homepage
Within the pages folder, you will see an index.vue file. This file is what rendered when we navigate to the home route of our application. What Nuxt.js does is, generate routes based on the files in the pages folder. 

For instance, if we have index.vue, about.vue and contact.vue files within the pages folder, Nuxt.js will form the routes for the application as /, /about and /contact respectively.

Having said that, open pages/index.vue it and replace it content with the code below:
<!-- pages/index.vue -->

<template>
  <section class="section is-large">
    <div class="container has-text-centered">
      <h1 class="title">Hi, I'm Chimezie Enyinnaya</h1>
      <h2 class="subtitle">a Software Developer based in Lagos, Nigeria.</h2>
    </div>
  </section>
</template>

If we visit the home route again, we should see the new homepage in action:

  

Creating The About Page
Let’s now create the about page. Within the pages folder, create a new about.vue file and paste the code below into it:
<!-- pages/about.vue -->

<template>
  <section class="section is-medium">
    <div class="container has-text-centered">
      <h1 class="title">About Me</h1>
      <p>
        My name is Chimezie Enyinnaya (AKA mezie), I’m a self taught software developer based in Lagos, Nigeria. I build modern applications for the web! I'm a technical writer, I write technical articles and tutorials for various platforms including <a href="https://scotch.io/@mezie">Scotch.io</a>.
      </p>
    </div>
  </section>
</template>

Navigate to http://localhost:3000/about to see the about page in action:

  
Creating The Projects Page
In the same vein, let’s create the projects page. Within the pages folder, create a new projects.vue file and paste the code below into it:
<!-- pages/projects.vue -->

<template>
  <section class="section is-medium">
    <div class="container has-text-centered">
      <h1 class="title">My Projects</h1>
      <p>
        Some of my projects can be found on <a href="https://github.com/ammezie" target="_blank">GitHub</a>.
      </p>
    </div>
  </section>
</template>

Navigate to http://localhost:3000/projects to see the projects page in action:

  
Creating The Contact Page
Finally, we create the contact page. Within the pages folder, create a new contact.vue file and paste the code below into it:
<!-- pages/contact.vue -->

<template>
  <section class="section is-medium">
    <div class="container has-text-centered">
      <h1 class="title">Contact Me</h1>
      <p>
        You can follow me on Twitter: <a href="https://twitter.com/ammezie" target="_blank">@ammezie</a>
      </p>
    </div>
  </section>
</template>

Navigate to http://localhost:3000/contact to see the contact page in action:

  

We now have a functional portfolio website.

Generating Static Site
Now, we are going to generate a static site for the portfolio website which so far contains bunch of Vue files. To do this, we’ll make use of the nuxt generate command:
npm run generate

The command above will run nuxt generate which will in turn start building the application and generate the static files. Once the it done, you should now have a distfolder which contains the generated static files.

The nuxt generate command works by generating HTML files off the Vue files files within the pages folder for all the application’s routes.

Conclusion
So in this tutorial, we looked at an overview of Nuxt.js. We also looked at why we might want to create static sites. Finally, we built a static website with Nuxt.js. As pointed out, Nuxt.js does more than just static site generation. You might want to go take a look at the docs to explore it more.
. . .
Source code https://github.com/ammezie/demo-portfolio