How to build a simple server rendered site using Nuxt.js

How to build a simple server rendered site using Nuxt.js

Published 04. jul 2018 06:25 by Stein Ove Helset

With Nuxt.js creating server rendered pages will be almost like a walk in the park. In this guide we will show you how to do it.

What is Nuxt.js?

Nuxt.js is a framework for creating server-rendered Vue.js applications. When you create a Vue.js application like this it's much easier for the search robots to find your content since you can navigate and find the content without using JavaScript.

Installing Nuxt.js

Installing Nuxt.js almost couldn't be any easier. You just run this command:

vue init nuxt-community/starter-template nuxtro
# If you haven't already installed vue-cli you have to do that first by running "npm install -g @vue/cli @vue/cli-init"

"nuxtro" is the project name, call it whatever you want. Last step before Nuxt.js is ready is to install the dependencies and run the dev server:

$ cd nuxtro
$ npm install
$ npm run dev

Now you'll be able to open http://localhost:3000/ in your browser and see the Nuxt.js starter template.

Creating a about page

Open up the nuxtro project in your editor. Inside the folder there should be a pages folder. Inside of that you can create a new file called about.vue. Nuxt.js will now automatically create a new route called "/about". Add this code inside about.vue:

<template>
<section class="container">
    <div>
        <h1>{{ title }}</h1>

        <nuxt-link to="/">Home</nuxt-link>
  </div>
</section>
</template>

<script>
  export default {
    data () {
      return {
        title: 'About page',
      }
    },
    head () {
      return {
        title: this.title,
      }
    }
  },
</script>

The page it self is quite boring, but there is a title and there is a link to go back to the front page. We declare a variable inside the data function and as you might see there is a head() too. This makes is possible to set the meta data of your site. The value of 'title' will be inside your <title> tag. Open up pages/index.vue and add the following line inside the links div:


<nuxt-link to="about">About</nuxt-link>

If you open up http://localhost:3000 in your browser now you should see the default page plus a new link. If you click it you will be sent to the about page.

Generating the server rendered pages

Nuxt.js is all about SSR (Server side rendering). Everything is actually already for us to generate the static pages now. Open up your command line and stop the dev server and then you can run this command:

nuxt generate

A static deployable version of your site is now available in the dist folder. If you go into that folder and type the following command you should be able to open http://localhost:8000 in your browser and see the server side rendered pages:

python -m SimpleHTTPServer 8000

If you'd rather want to create a universal app (the html is generated on the fly in the backend) you can run these two commands:

$ npm build
$ npm start

This starts a node server ready for production. If you open http://localhost:3000 now the server will generate the pages on the fly and your site will work fine without JavaScript. I will post more tutorials on Nuxt.js like how to build a blog and some others. Sign up to my newsletter and you'll get notified when they're published.

Share this post

Comments

No comments yet

Add comment