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

Introduction

Usage of static websites are increasing in popularity recently. It’s not a surprise as static site generators seem to have been gaining more popularity recently too. There are various static site generators that you can use to build websites. Some of these generators include Jekyll, Hugo, Gatsby, Nuxt.js to mention but a few. Gatsby and Nuxt.js are pretty new to the collection.

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

What is a Static Site

A static site is the simplest kind of website you can build. Static sites are written in HTML, CSS, and sometimes little JavaScript. A static site contains little or no user interactions. They are stored in the filesystem of a server and are delivered to the user exactly as stored. The same information is displayed for all users. Static sites are suitable for the contents that never or rarely need to be updated, though modern static site generators are changing this.

Why Static Site

You might ask yourself why static site? Well, there are a lot of benefits to using a static site. These benefits include and are not limited to the following:

Speed: This is the most obvious benefit of a static site as it is just HTML, CSS, and JS files and some assets. There is no back and forth between the client and a server, hence its speed. Static sites can be served from a CDN.

Less Resources: Static sites use less resources as things like servers and databases are not necessarily needed.

Security: You don’t have to worry about your servers been hacked or database vulnerabilities.

In addition to the above, there are various platforms that can help you with hosting your static site. These platforms includes: GitHub Pages, Netlify, Surge, etc.

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 launch 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 into 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 that 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 link object that is inside the head object:

{ 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:

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

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

<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 is 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 its content with the code below:

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

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

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

<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 a 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 that is done, you should now have a dist folder that contains the generated static files.

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

Deploying Our Static Site

The final thing we’ll do is deploy the static site to a live server. For this, we’ll be using Netlify, though you can use GitHub Pages or any other static site hosting. So head over to Netlify and sign up if you don’t have an account with them yet.

Once logged in, click the New site from Git button:

Then select your Git provider, I’ll be using GitHub. You will be directed to authorize with GitHub (in my case):

Once authorized, you will be redirected back and you will see a list of your GitHub projects which you can choose the one you want to deploy from:

Next, we need to specify a build command and a publish directory. For the build command, we enter npm run generate which is the same command we used to build our files locally. Then we enter dist as the publish directory. Again, this is the same directory the generated files will be.

Finally, click the Deploy site button to start the deployment.

Once the deployment is complete, Netlify will generate a random name with a URL for your application with which you can access the application.

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.