Posts Learn Components Snippets Categories Tags Tools About

Deploying NuxtJS application to Cloudflare Pages

Learn how to easily deploy NuxtJS application to Cloudflare Pages and get it serve by Cloudflare world-class infrastructure

3 years ago

6 mins read


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 Homepage

Currently, Cloudflare Pages is still in open beta and but it's accessible for everyone to get started and try out the platform. 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.
Cloudflare Pages Dashboard

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.
Connect with Github account

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

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

By now the pages will be up and running on Cloudflare Pages. Visit HackerNews clone built with Nuxt.js.
HackerNews clone built with Nxut.js on Cloudflare Pages

Alternative Tags

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️


PostSrc Code Snippets

Learn new snippets today, level up your Laravel, Alpine JS, Vue JS, Tailwind CSS skills and more.

Learn New Snippets

Sponsors 👑

+ Add Yours

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components