VueJS Server-Side Rendering with Nuxt

Zakky Rausyanfikry
Aug 31, 2018 · 3 min read
Source: http://nuxtjs.org

Creating front-end web with single page application (SPA) is totally a ‘thing’ nowadays, SPA allows you to create applications that provide UI and functionality similar to desktop apps, this because SPA only need to load the page once, you only need one HTML file with empty body and let the Javascript do the magic. Amazing!

But, there is one problem, since Javascript DOM works only on client-side, the Google machine can’t see what’s inside your application, this because Google is indexing your application from server-side, so Google only see an empty HTML file and that’s bad for SEO.

Fortunately, there’s NodeJS — Javascript that runs on server, and this can provide server-side rendering for your application. Yay!


VueJS with Server-Side Rendering

So now we’ll be looking at VueJS. What is it?, VueJS is a progressive framework for building user interfaces. Why VueJS?, it’s a popular Javascript framework/library that is simple, easy to understand and have a huge community.

Back to the main topic, server-side rendering and VueJS? of course, Nuxt. Nuxt is a framework for creating VueJS application with server-side rendering support. I always use a starter template from the Nuxtjs team, there’s some library included, one of them is Vuex — store to manage the application state, and it has been configured to be used easily.

Directory Structure

Source: https://github.com/nuxt-community/starter-template/tree/master/template

Contains uncompiled assets such as Less, Sass or Javascript.

Here is where you put your Vue Components

Contains Application Layout, maybe in some case you have different layout for some pages, you can create more than 1 layout and put them here.

Contains Application Middleware. Middleware lets you define custom functions that can be run before rendering either a page or a group of pages (layouts).

Contains Application Views and Routes. Nuxt reads all the *.vue files inside this directory and creates the application router. Nuxt also reads directory inside to make a nested route, for example, you have directory /users and there are index.vue and _id.vue, if you accessing {{base_url}}/users, the /users/index.vue will be loaded, and if you accessing {{base_url}}/users/123, the /users/_id.vue will be loaded. This directory can’t be renamed.

Contains your Javascript plugins that you want to run before instantiating the root Vue.js Application.

Contains your static files. Each file inside this directory is mapped to the URL root. For example, /static/favicon.ico is mapped as /favicon.ico.

Contains your Vuex Store files. The Vuex Store option is implemented in the Nuxt framework. Creating an index.js file in this directory enables the option in the framework automatically.

Nuxt custom configuration file.

Contains your Application dependencies and scripts.


With this starter template, you can manage your project neatly.

Here is an example that I created using Nuxt, and yes, I’m using Vuex for storing data from API.

I’m fetching data from reqres.in

Maybe next time I’ll create a tutorial for the example above. See you next time, Happy coding! :)

SkyshiDigital

We help scale up your startup to the next level

Zakky Rausyanfikry

Written by

SkyshiDigital

We help scale up your startup to the next level

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade