Home / Tutorials / Deploying NuxtJS application to Cloudflare Pages
Deploying NuxtJS application to Cloudflare Pages cover

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

6 mins

770

3 years ago

0 comments

Average

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
notion avatar

Alaz

Week-end developer currently experimenting with web, mobile, and all things programming.

Support Us

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

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this