VueJS Server-Side Rendering with Nuxt

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

Assets Directory
Contains uncompiled assets such as Less, Sass or Javascript.
Components Directory
Here is where you put your Vue Components
Layouts Directory
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.
Middleware Directory
Contains Application Middleware. Middleware lets you define custom functions that can be run before rendering either a page or a group of pages (layouts).
Pages Directory
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.
Plugins Directory
Contains your Javascript plugins that you want to run before instantiating the root Vue.js Application.
Static Directory
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.
Store Directory
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.
The nuxt.config.js File
Nuxt custom configuration file.
The package.json 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.

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