How to Render Vue Apps to a Server Using Nuxt

Learn how to easily get started rendering apps built with Vue to a server to improve your app's performance using Nuxt.js.

As one of the contemporary widely used JavaScript frameworks/libraries, Vue.js offers an awesome user experience by dynamically rendering page content without necessarily sending a request to the server each time.

However fast rendering of contents by Vue.js might be, whenever your site starts to grow, it takes a fair amount of time before the website is finally rendered, as it contains plenty of content required to construct the page.

With Nuxt.js you can easily preload content on the web server and render HTML as the response to a browser request for a page. This will ultimately improve “time to content” when loading an application.

In this post we will examine some of the basic concepts of building applications using Nuxt.js and also build a simple static site in the process.

Why Server-Side Rendering

Server-side rendering is a clever solution to improve page rendering performance in any application, especially those powered by Vue.js. It eliminates the need to send a request to server and recreate pages that don’t contain dynamic content — for example, a contact us page. A server can create this page once and cache it for future use.

This will obviously improve the speed of page rendering, no matter how subtle it might be.

Why Nuxt.js

Nuxt.js simplifies the development of Vue.js applications. One of its major focuses is the creation of universal apps — by this, I mean applications that are also rendered on the server. Nuxt.js isn’t a replacement for server-side libraries like Express; it is not a server-side framework. It just allows us to pre-render views on the fly from the server.

Another point to note is the setup of routes irrespective of the scale of your application. You can simply create a file for a page, and Nuxt.js will automatically set up the route for you to navigate and view the newly created file out of the box. We will see this later in the tutorial.

Nuxt.js builds upon Vue, and you can still write and structure your applications the same way you would while building a typical Vue.js application.

Prerequisites

A basic knowledge of JavaScript and Vue is required for this tutorial. Also ensure that you have Node.js, NPM and Vue CLI installed on your computer.

Setting up the Project

If you haven’t downloaded Vue’s CLI already, do so with this command to have it installed globally on your machine:

Next, to get started with creating a Nuxt.js app, run the following command to use the CLI to scaffold a new project named fictional-store from your terminal:

Change directory into the newly created project and install all its dependencies:

Running the Application

Launch the project with:

If you get this compiled error displayed in the console:

You can fix it by opening ./nuxt.config.js and replace the build{}object with:

Stop the server by pressing CTRL + c and restart the server again:

 This will run the application on the default port for a Nuxt.js app at http://localhost:3000/. Navigate to that URL, and you should see the welcome page automatically created by Nuxt.js:

Project Structure

This is going to be an introduction to using Nuxt.js. Before we proceed, let’s take a quick look at the folder structure of the static application that we want to build. We will basically create a few pages and navigate through them. Doing so, you will have an idea of how routing simply works without the need to configure this manually.

Our application will have the following pages:

• Homepage
• About page
• Product page
• Contact page

Creating Components

We will set up a reusable Navigation component for this project, but before that, let’s pull in Bootstrap to help with some default page layout.

Add Bootstrap

Open ./nuxt.config.js and include the CDN link for Bootstrap within the link object:

You will need to restart the server for Bootstrap to be successfully installed for this project. To do this, hit CTRL + C from the terminal to stop the server if it currently running and restart with npm run dev.

Navigation Bar Component

Next, locate the components folder and create a new file named Navigation.vue. Paste the code below in it:

Here, we created a navigation bar and set up links to the pages that we will create soon.

Modify the Default Layout

Now, open the default.vue within the layouts folder and replace the contents with:

We have only imported the Navigation component and included it just above <nuxt />. This will help us create a master layout.

Adding a New Page

Once you set up a new project with Nuxt.js, a new file will automatically be generated and will set up a view for the homepage. This is what we were able to view from the browser earlier.

Update the index page by replacing the content found in ./pages/index.vue with:

If you visit the homepage at http://localhost:3000/ now you should see this page:

About Us Page

Create a another file named about.vue within the pages folder and paste the content below in it:

Product Page

Next, create a product page within the pages folder and name it product.vue. Open the newly created file and paste in the following content:

You can find product page here http://localhost:3000/product

View Page Source

If you right-click and view the page source of this application now, you will see the exact content as depicted by the image below:

This is one of the main advantages of server-side rendering brought to Vue.js application by Nuxt.js, as well as the reason it is termed as a library for building “universal Vue.js applications.” Obviously, this is an indication that our app is rendered both on the client and the server. This is really important, as it makes it easy for search engines to index our site.

Contact Us Page

Create the contact us page as contact.vue within the pages folder as well and add the content below:

Generating Static Site

With Nuxt.js you can easily generate static site using a single command.

Using the command above, Nuxt.js will generate the HTML for every one of the routes and pages created and save them in a file.

Moving forward, you can easily deploy your website to the live server by simply uploading the newly generated dist folder.

Test the Application

Run the application in case you haven’t done so with:

See it working on http://localhost:3000/

Conclusion

Effective and fast page rendering without much delay is crucial to the success of any web application. As seen in this tutorial, you can greatly simplify the development and improve the performance of Vue.js applications by using Nuxt.js for server-side rendering.

To see Nuxt.js in action, we built a simple store and later compiled it into a dist folder.

I hope you found this tutorial helpful. Find the complete source code on GitHub.

---

For more info on Vue: Want to learn about creating great user interfaces with Vue? Check out Kendo UI for Vue our complete UI component library that allows you to quickly build high-quality, responsive apps. It includes all the components you’ll need, from grids and charts to schedulers and dials.

For more info on Nuxt.js: Feel free to check out the blog post, Getting Started with Nuxt.js, to learn more about Nuxt and how you can use it in your apps.