This was originally published on my blog.
Cloudflare Workers is probably the easiest way to deploy super fast serverless code to edge locations around the world. In this post, we'll explore what it takes to deploy a Vue application with Workers (hint: it doesn't take much).
I was able to test with the free plan so you probably can, too, but I recommend upgrading because it's a great deal.
To get started, let's create a Vue app via the CLI with
npx @vue/cli create vue-on-workers && cd vue-on-workers. This will create our app, install our dependencies, and put us right where we need to be.
Wrangler is a sweet CLI that Cloudflare cooked up for us. Install it with
npm i -g @cloudflare/wrangler.
For this next part, you'll need an API Token. TIP: Use the "Edit Cloudflare Workers" template.
wrangler config to get set up using the CLI.
With our Vue app created and Wrangler all config'd up, we can now turn our Vue project into a Wrangler project by running
wrangler init --site.
You may notice your project now has a
wrangler.toml file as well as an additional directory, called
Now, all that's left to do is add a couple things to the config file. Add your
account_id (can be found in the bottom-right of your Cloudflare dashboard) and ensure
bucket is set to the
name = "vue-on-workers" type = "webpack" account_id = "add_your_account_id" # HERE workers_dev = true route = "" zone_id = "" [site] bucket = "dist" # AND HERE entry-point = "workers-site"
Once you've set those two items in your
wrangler.toml file, run
npm run build && wrangler publish to build and deploy!
- There's additional work that needs to be done in order to ensure that Vue Router can handle routing appropriately, which you can read more about in this great Stack Overflow answer.
- Workers is a great (possibly better) solution for hosting a statically-generated site, like the ones you get from Gridsome, Gatsby, or Hugo.
- Read more about hosting a site on Cloudflare Workers.
Need some help? Want to chat? Feel free to reach out.