Deploying NuxtJS application to Cloudflare Pages

In this post, you'll be learning how to deploy/host NuxtJS application to Cloudflare Pages. Although this tutorial is tailored for NuxtJS application, the fundamental is pretty much the same for other front-end projects since the platform itself is built especially to host JAMstack application.

Cloudflare Pages is available for deploying Nuxt applications. The dashboard shown below reflects the interface used when this tutorial was written. Upon registering we are greeted by a screen that can allow us to right away create a project. The process to get started is really painless and it's very easy to get a project up and running.

NuxtJS Example Application

For the sake of this example, we'll be deploying HackerNews clone built with Nuxt.js which you can directly get the source code from GitHub repository.

The easiest way to prepare the repository is to just fork it rather than cloning the project to the local machine. Since we'll allow Cloudflare pages to retrieve the code that we have just updated on the front-end you'll have to connect it to GitHub and give permission for Cloudflare to access the repository.

Once it's linked, select the repository to be hosted on Cloudflare Pages and in this case the Hackernews NuxtJS project.

For the build settings, choose the Nuxt.js preset and this will autofill the build command as well as the output directory to dist.

By now the site should be deployed on Cloudflare Pages. The original demo is no longer online, but the Nuxt Hacker News source project remains available on GitHub.