diff --git a/src/content/docs/workers/frameworks/framework-guides/react.mdx b/src/content/docs/workers/frameworks/framework-guides/react.mdx index 9bc9ce1ae6760f..f1ea717989c246 100644 --- a/src/content/docs/workers/frameworks/framework-guides/react.mdx +++ b/src/content/docs/workers/frameworks/framework-guides/react.mdx @@ -63,3 +63,7 @@ The following command will build and deploy your project. If you are using CI, e You can serve static assets in your React application by [placing them in the `./public/` directory](https://vite.dev/guide/assets#the-public-directory). This can be useful for resource files such as images, stylesheets, fonts, and manifests. + +## Use bindings with React + +Your new project also contains a Worker at `./api/index.ts`, which you can use as a backend API for your React application. While your React application cannot directly access Workers bindings, it can interact with them through this Worker. You can make [`fetch()` requests](/workers/runtime-apis/fetch/) from your React application to the Worker, which can then handle the request and use bindings. Learn how to [configure Workers bindings](/workers/runtime-apis/bindings/). diff --git a/src/content/docs/workers/frameworks/framework-guides/vue.mdx b/src/content/docs/workers/frameworks/framework-guides/vue.mdx new file mode 100644 index 00000000000000..d51667ce2d6038 --- /dev/null +++ b/src/content/docs/workers/frameworks/framework-guides/vue.mdx @@ -0,0 +1,69 @@ +--- +pcx_content_type: how-to +title: Vue +head: [] +description: Create a Vue application and deploy it to Cloudflare Workers with Workers Assets. +--- + +import { + Badge, + Description, + InlineBadge, + Render, + PackageManagers, +} from "~/components"; + +In this guide, you will create a new [Vue](https://vuejs.org/) application and deploy to Cloudflare Workers (with the new [ Workers Assets](/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: + + + + + +After setting up your project, change your directory by running the following command: + +```sh +cd my-vue-app +``` + +## 2. Develop locally + +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. + + + +## 3. Deploy your project + +Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain](/workers/configuration/routing/custom-domains/), from your own machine or from any CI/CD system, including [Cloudflare's own](/workers/ci-cd/builds/). + +The following command will build and deploy your project. If you are using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately. + + + +--- + +## Static assets + +You can serve static assets in your Vue application by [placing them in the `./public/` directory](https://vite.dev/guide/assets#the-public-directory). This can be useful for resource files such as images, stylesheets, fonts, and manifests. + + + +## 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](/workers/runtime-apis/fetch/) from your Vue application to the Worker, which can then handle the request and use bindings. Learn how to [configure Workers bindings](/workers/runtime-apis/bindings/).