---
title: Vue · Cloudflare Workers docs
description: Create a Vue application and deploy it to Cloudflare Workers with Workers Assets.
source_url:
  html: https://angela-ssl-tls-updates.preview.developers.cloudflare.com/workers/frameworks/framework-guides/vue/index.md
  md: https://angela-ssl-tls-updates.preview.developers.cloudflare.com/workers/frameworks/framework-guides/vue/
---

In this guide, you will create a new [Vue](https://vuejs.org/) application and deploy to Cloudflare Workers (with the new [Workers Assets](https://developers.cloudflare.com/workers/static-assets/)).

## 1. Set up a new project

Use the [`create-cloudflare`](https://www.npmjs.com/package/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 Workers Assets, run the following command:

* npm

  ```sh
  npm create cloudflare@latest -- my-vue-app --framework=vue
  ```

* pnpm

  ```sh
  pnpm create cloudflare@latest my-vue-app --framework=vue
  ```

* yarn

  ```sh
  yarn create cloudflare my-vue-app --framework=vue
  ```

## **Develop locally with the [Cloudflare Vite plugin](https://developers.cloudflare.com/workers/vite-plugin/)**

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

  ```sh
  npm run dev
  ```

* pnpm

  ```sh
  pnpm run dev
  ```

* yarn

  ```sh
  yarn run dev
  ```

## 3. Deploy your project

Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain](https://developers.cloudflare.com/workers/configuration/routing/custom-domains/), from your own machine or from any CI/CD system, including [Cloudflare's own](https://developers.cloudflare.com/workers/ci-cd/builds/).

The following command will build and deploy your project. If you are using CI, ensure you update your ["deploy command"](https://developers.cloudflare.com/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately.

* npm

  ```sh
  npm run deploy
  ```

* pnpm

  ```sh
  pnpm run deploy
  ```

* yarn

  ```sh
  yarn run deploy
  ```

***

## Asset Routing

If you're using Vue as a SPA, you will want to set `not_found_handling = "single_page_application"` in your Wrangler configuration file.

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](https://developers.cloudflare.com/workers/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`](https://developers.cloudflare.com/workers/static-assets/routing/#not_found_handling).

Refer to the [routing documentation](https://developers.cloudflare.com/workers/static-assets/routing/#routing-configuration) for more information about how routing works with static assets, and how to customize this behavior.

## Use bindings with Vue

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](https://developers.cloudflare.com/workers/runtime-apis/fetch/) from your Vue application to the Worker, which can then handle the request and use bindings.

With bindings, your application can be fully integrated with the Cloudflare Developer Platform, giving you access to compute, storage, AI and more.

[Bindings ](https://developers.cloudflare.com/workers/runtime-apis/bindings/)Access to compute, storage, AI and more.
