Build a universal web app with Nuxt.js

Nuxt.js is a non-official framework that brings together Vue, Vue Router, and Vuex, and was inspired by the similar React-based framework Next.js. It takes a convention-over-configuration approach to remove a lot of the boilerplate from the process of developing Vue applications. Nuxt’s conventions reduce the time it takes to build out sophisticated Vue applications, but almost every aspect of the framework can be overridden, tweaked, and customized.

Although that in itself is an attractive proposition, Nuxt’s killer feature is its support for server-side rendering (SSR). As you’re probably aware, creating JavaScript apps that can be rendered on the server as well as on the client (often referred to as universal web applications) is a very useful technique for improving first-load performance and SEO.

SSR is commonly quite a complicated thing to put in place, so Nuxt really scores here by making the process relatively straightforward and painless. As if that wasn’t enough, it now supports static site generation as well, allowing you to get the performance and SEO benefits of SSR on cheap, static-page hosting.

For more on Nuxt.js check out chapter 6 from Sitepoint book Jump Start Vue.js.

Jump Start Vue.js

In this chapter of Jump Start Vue.js you’ll build the staff directory app pictured above that will will fetch data from a remote API and display it in a custom component on the home page. Clicking one of the items will take the user through to a detail page with more information.