Handling server side rendering and SEO with nuxt.js

Something that I hate doing in Vue JS is handling server side rendering.

If you care about SEO, then you have a couple of options to achieve that.

• Server side rendering (which is what we are going to do with nuxt.js)
• Prerendering (to generate static HTML files at build time)

There is already some great documentation on server side rendering from Vue JS, which you can find here https://ssr.vuejs.org/en/basic.html. But still, I find it complicated, especially if you are a beginner at this.

Setting up nuxt.js

Let’s go through the steps to set up nuxt.js.

First of all, you need to have vue-cli and node already installed.

If you don’t know how to do that, then I already have 2 installation videos on my YouTube channel for Mac and Windows, click here.

After that, the commands are pretty simple.

vue init nuxt/starter nuxtmedium (just press enter here for all the questions)
cd nuxtmedium
npm install
npm run dev

Now, you have your nuxt js project created with all the dependencies installed and it runs on http://localhost:3000

Routing is different

Routing in nuxt.js is a bit different. It is automatically generated according to your treeview inside the pages folder.

You can read more about routing here.

So, let’s create two routes. Inside the pages folder, we will create two folders and each folder will have an index.vue file.

It must look like this. Your vue files should have a lowercase “i”.

Now, nuxt.js will read this treeview and it will create two routes, /about and /contact.

Let’s add some content inside about’s index.vue first.

<template>
 <div>
 <h1>About page</h1>
 </div>
</template>

Let’s do the same for contact.

<template>
 <div>
 <h1>Contact page</h1>
 </div>
</template>

Now you can visit http://localhost:3000/contact and http://localhost:3000/about

Cool… Now what? How can we handle SEO?

Handling SEO with nuxt.js

In nuxt.js all you need to do to handle SEO for a page is to include the head option inside your script.

Thus, for about we can have something like this…

<script>
  export default {
    head: {
    title: 'This is the about page',
    meta: [
        {
         hid: 'description',
         name: 'description',
         content: 'My about page'
        }
      ]
    }
  }
</script>

The final index.vue file for about is this

<template>
 <div>
 <h1>About page</h1>
 </div>
</template>
<script>
 export default {
 head: {
 title: ‘This is the about page’,
 meta: [
 {
 hid: ‘description’,
 name: ‘description’,
 content: ‘My about page’
 }
 ]
 }
 }
</script>

And this one for contact

<template>
 <div>
 <h1>Contact page</h1>
 </div>
</template>
<script>
 export default {
 head: {
 title: ‘This is the contact page’,
 meta: [
 {
 hid: ‘description’,
 name: ‘description’,
 content: ‘My contact page’
 }
 ]
 }
 }
</script>

Now if you visit contact and about, you can see the title changing and also, if you check the source code, you can see the meta tag for description.

So, there you have it, with nuxt.js your SEO is again on point.

If you get eslint errors due to spacing, then you can turn it off by opening nuxt.config.js and comment the if code inside the extend function.

extend (config, ctx) {
 /*
 if (ctx.dev && ctx.isClient) {
 config.module.rules.push({
 enforce: ‘pre’,
 test: /\.(js|vue)$/,
 loader: ‘eslint-loader’,
 exclude: /(node_modules)/
 })
 }
 */
 }

Is nuxt.js just for server side rendering and SEO?

Well, you have a couple of options to handle server side rendering and SEO in Vue.JS, so nuxt.js is not just about that. It can do more!

First of all, they provide you a better folder structure to get started with your project.

Routing is a bit complicated at the beginning, but once you understand it, you can see the power of it.

But where nuxt.js steps up the game is with another deployment option called nuxt generate. It will build a static generated Vue.js application.

Some of the features listed in their documentation are these.

• Write Vue Files
• Automatic Code Splitting
• Server-Side Rendering
• Powerful Routing System with Asynchronous Data
• Static File Serving
• ES6/ES7 Transpilation
• Bundling and minifying of your JS & CSS
• Managing <head> element (title, meta...)
• Hot module replacement in Development
• Pre-processor: SASS, LESS, Stylus, etc
• HTTP/2 push headers ready
• Extending with Modular architecture

So, nuxt time you want to create a vue.js application, make sure you use nuxt.js!