In this post, I’ll show you how to pre-render pages using Vue and Nuxt. This method combines the convenient development experience of Vue without forfeiting critical features like social sharing or search engine optimization.

This tutorial assumes no experience with Vue or Nuxt. I’ll explain everything along the way.

The problem with Vue

Like Angular and React, Vue is a framework for building single-page apps (SPAs). While traditional websites force the browser to download a whole new page every time the user clicks a link within your site, SPAs keep everything on a single page. When the user navigates around your site, JavaScript simply draws a new page without pulling everything down from the server again. This cuts out slow network calls between the user’s browser and your web server, resulting in a user experience that feels speedy and smooth.