Skip to content

Commit 60d1bc5

Browse files
Add docs for experimental C3 Workers + Assets template for Vue
1 parent 84812bf commit 60d1bc5

File tree

1 file changed

+63
-0
lines changed
  • src/content/docs/workers/frameworks/framework-guides

1 file changed

+63
-0
lines changed
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
pcx_content_type: how-to
3+
title: Vue
4+
head: []
5+
description: Create a Vue application and deploy it to Cloudflare Workers with Workers Assets.
6+
---
7+
8+
import {
9+
Badge,
10+
Description,
11+
InlineBadge,
12+
Render,
13+
PackageManagers,
14+
} from "~/components";
15+
16+
In this guide, you will create a new [Vue](https://vuejs.org/)) application and deploy to Cloudflare Workers (with the new [<InlineBadge preset="beta" /> Workers Assets](/workers/static-assets/)).
17+
18+
## 1. Set up a new project
19+
20+
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, initiate Vue's official setup tool, and provide the option to deploy instantly.
21+
22+
To use `create-cloudflare` to create a new Vue project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
23+
24+
<PackageManagers
25+
type="create"
26+
pkg="cloudflare@latest my-vue-app"
27+
args={"--framework=vue --experimental"}
28+
/>
29+
30+
<Render
31+
file="c3-post-run-steps"
32+
product="workers"
33+
params={{
34+
category: "web-framework",
35+
framework: "vue",
36+
}}
37+
/>
38+
39+
After setting up your project, change your directory by running the following command:
40+
41+
```sh
42+
cd my-vue-app
43+
```
44+
45+
## 2. Develop locally
46+
47+
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.
48+
49+
<PackageManagers type="run" args={"dev"} />
50+
51+
## 3. Deploy your Project
52+
53+
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/).
54+
55+
The following command will build and deploy your project. If you're using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately.
56+
57+
<PackageManagers type="run" args={"deploy"} />
58+
59+
---
60+
61+
## Static assets
62+
63+
You can serve static assets your Vue application by placing them in the [`./public/` directory](https://vite.dev/guide/assets.html). This can be useful for resource files such as images, stylesheets, fonts, and manifests.

0 commit comments

Comments
 (0)