Vue.js
Posted By Sebastian

Introduction To Server Rendered Vue.js Apps With Nuxt


DemoCode

The Vue.js framework is one of the top trending framework for web developers this year. Vue.js makes it easy to get started and enables you to build all types of single-page web applications.

The Nuxt framework is built on top of the Vue.js framework and it’s main focus is eliminate client rendering. Instead Nuxt offers server rendering or static file rendering to boost the performance of your web application. By using a configuration file Nuxt makes it very easy to specify the details of the rendering process.

Let’s explore how to work with Nuxt by starting a new project from scratch …

Setting Up The Project

Nuxt makes it really easy to get started. To initiate a new Nuxt project we’re able to use Vue CLI. If you haven’t installed Vue CLI on your system yet you first need to install the NPM package:

$ npm install -g vue-cli

Next, we’re able to make use of Vue CLI to setup the Nuxt project:

$ vue init nuxt/starter my-nuxt-app-01

By using this command a new folder my-nuxt-app-01 is created and the nuxt/starter template is downloaded into that folder. Next, change into the newly created project folder and execute the following command to install dependencies:

$ npm install

Now we’re ready to start up the development web server by using

$ npm run dev

The application is made available on port 3000. If you’re opening up the Nuxt application in the browser you should be able to see the following result:

Project Structure

Now that we have our first Nuxt application running, let’s explore the project structure by opening up the project durectory in your favorite code editor.

As you can see you’ll find various subfolders inside the project. Let’s explore each folder:

  • Assets Directory: This is the place to store LESS, SASS or JavaScript files which should not be compiled.
  • Components Directory: This directory contains all your Vue.js components.
  • Layouts Directory: This is the place to store your application layout files.
  • Middleware Directory: The middleware directory contains your application middleware implementations. Middleware are custom functions that are executed prior to rendering a page.
  • Pages Directory: This is the place where application views (pages) are stored. The Nuxt framework will automatically create a corresponding route for each .vue file contained in this directory.
  • Plugins Directory: This plugins directory contains your JavaScript plugins that are loaded before instantiating the Vue.js application.
  • Static Directory: Contains static files of your project. All files are mapped to /.
  • Store Directory: If you would like to use Vuex in your Nuxt application this is the directory where you should put your store files in.

Configuration

In addition to the project structure described above you’ll find two configuration files in the project folder which are both essential to for your application: nuxt.config.js and package.json.

nuxt.config.js File

The nuxt.config.js file is the main configuration file which is used by Nuxt. A default configuration is already included.

package.json

The package.json file is containing all application dependencies and scripts.

Adding A New Page & Routing

Nuxt doesn’t need an explicit routing configuration. Instead the framework generates a vue-router configuration automatically for each file inside the pages directory.

Let’s say that we want to make available the following two routes in our application:

  • /home
  • /home/about

To do so let’s create a new subfolder home inside the pages folder and add two new files:

  • index.vue
  • about.vue

Next, let’s insert the following code in index.vue:

<template>
 <h1>This is /home</h1>
</template>

<script>
export default {
}
</script>

and the following code in about.vue:

<template>
 <h1>This is /home/about</h1>
</template>

<script>
export default {
}
</script>

Having inserted the code you can access both codes in the browser without the need of configuring the router.

Accessing http://localhost:3000/home is showing the following result:

And accessing http://localhost:3000/home/about will show the following result:

Deployment

After the application has been implemented we’re ready to deploy. Nuxt supports two ways of making your application available:

  • Server Rendered
  • Static Generated

Let’s see what’s the exact difference and how we can make use of both options in the following.

Server Rendered Deployment

The Nuxt framework handles all the UI rendering of your project. You’ve already seen how to start a development web server which hosts your project locally. In this case the Nuxt framework is operating in server rendered mode automatically which means that all views (pages) of your application are pre-rendered on server-side and delivered as HTML files to the client. No client-side rendering is required in this case.

Server rendering your applications means a faster loading on client side. As the server’s response is delivered as HTML the browser is able to directly render the page. In contrast, if a client rendered page is requested the browser gets a pretty empty document with link to JavaScript code which needs to be executed to generate the HTML code first.

To start the Nuxt server in production mode you need to execute the following two commands:

$ npm run build
$ npm run start

If you already have a server you’re able to use Nuxt as a middleware. For further on this topic take a look at https://nuxtjs.org/api/nuxt or try out the ExpressJS + Nuxt starter template which is available at https://github.com/nuxt/express.

Static Generated Deployment

Another great option of Nuxt is that it can generate static HTML files for your application by using the following command:

$ npm run generate

The output can be seen in the following screenshot:

Executing this command will generate the HTML of every of your routes into a separate file. As you can see from the output three routes are recognized:

  • /
  • /home
  • /home/about

The following three files are generated into the dist folder:

  • index.html
  • home/index.html
  • home/about/index.html

With those static HTML files available you’re ready to deploy the application to any static file hosting service.

Let’s use surge.sh to deploy our generated static HTML files. First we need to install the surge command line tool via NPM:

$ npm install -g surge

Next, we need to switch into the dist directory:

$ cd dist

and finally execute the command surge:

$ surge

Executing this command requires you to input an email address and a password to create your surge.sh account. Furthermore you need to specify the subdomain of surge.sh to which the application should be deployed.

ONLINE COURSE: Vue.js 2 - The Complete Guide

Check out the great Vue.js online course by Maximilian Schwarzmüller with thousands of students already enrolled:

Vue JS 2 – The Complete Guide 

  • Build amazing Vue.js Applications – all the Way from Small and Simple Ones up to Large Enterprise-level Ones
  • Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)
  • Understand the Theory behind Vue.js and use it in Real Projects
Go To Course

Using and writing about best practices and latest technologies in web design & development is my passion.

    View Comments

    *