Vue
In this guide, you will create a new Vue ↗ application and deploy to Cloudflare Workers (with the new Beta Workers Assets).
Use the create-cloudflare
↗ CLI (C3) to set up a new project. C3 will create a new project directory, use code from the official Vue template, and provide the option to deploy instantly.
To use create-cloudflare
to create a new Vue project with Beta Workers Assets, run the following command:
npm create cloudflare@latest my-vue-app -- --framework=vue --platform=workers
pnpm create cloudflare@latest my-vue-app --framework=vue --platform=workers
yarn create cloudflare my-vue-app --framework=vue --platform=workers
For setup, select the following options:
- For What would you like to start with?, choose
Framework Starter
. - For Which development framework do you want to use?, choose
Vue
. - Complete the framework's own CLI wizard.
- For Do you want to use git for version control?, choose
Yes
. - For Do you want to deploy your application?, choose
No
(we will be making some changes before deploying).
After setting up your project, change your directory by running the following command:
cd my-vue-app
After you have created your project, run the following command in the project directory to start a local server. This will allow you to preview your project locally during development.
npm run dev
pnpm run dev
yarn run dev
Your project can be deployed to a *.workers.dev
subdomain or a Custom Domain, from your own machine or from any CI/CD system, including Cloudflare's own.
The following command will build and deploy your project. If you are using CI, ensure you update your "deploy command" configuration appropriately.
npm run deploy
pnpm run deploy
yarn run deploy
You can serve static assets in your Vue application by placing them in the ./public/
directory ↗. This can be useful for resource files such as images, stylesheets, fonts, and manifests.
By default, Cloudflare first tries to match a request path against a static asset path, which is based on the file structure of the uploaded asset directory. This is either the directory specified by assets.directory
in your Wrangler config or, in the case of the Cloudflare Vite plugin, the output directory of the client build. Failing that, we invoke a Worker if one is present. If there is no Worker, or the Worker then uses the asset binding, Cloudflare will fallback to the behaviour set by not_found_handling
.
Refer to the routing documentation for more information about how routing works with static assets, and how to customize this behavior.
Your new project also contains a Worker at ./server/index.ts
, which you can use as a backend API for your Vue application. While your Vue application cannot directly access Workers bindings, it can interact with them through this Worker. You can make fetch()
requests from your Vue application to the Worker, which can then handle the request and use bindings. Learn how to configure Workers bindings.
Was this helpful?
- Resources
- API
- New to Cloudflare?
- Products
- Sponsorships
- Open Source
- Support
- Help Center
- System Status
- Compliance
- GDPR
- Company
- cloudflare.com
- Our team
- Careers
- 2025 Cloudflare, Inc.
- Privacy Policy
- Terms of Use
- Report Security Issues
- Trademark