create-cloudflare 2.40.2 → 2.40.3

package/dist/cli.js

@@ -74977,7 +74977,7 @@ var Yargs = YargsFactory(esm_default);
 var yargs_default = Yargs;
 
 // package.json
-var version = "2.40.2";
+var version = "2.40.3";
 
 // src/metrics.ts
 var import_node_async_hooks = require("node:async_hooks");
@@ -76692,23 +76692,70 @@ var c3_default13 = config11;
 // templates-experimental/vue/c3.ts
 var { npm: npm8 } = detectPackageManager();
 var generate11 = async (ctx) => {
-  await runFrameworkGenerator(ctx, [ctx.project.name]);
+  const lang = ctx.args.lang ?? await inputPrompt({
+    type: "select",
+    question: "Would you like to use TypeScript?",
+    label: "Language",
+    options: [
+      { label: "TypeScript", value: "ts" },
+      { label: "JavaScript", value: "js" }
+    ]
+  });
+  await runFrameworkGenerator(ctx, [
+    ctx.project.name,
+    "--router",
+    lang === "ts" ? "--ts" : ""
+  ]);
+  logRaw("");
+};
+var configure9 = async (ctx) => {
+  await installPackages(["@cloudflare/vite-plugin"], {
+    dev: true,
+    startText: "Installing the Cloudflare Vite plugin",
+    doneText: `${brandColor(`installed`)} ${dim("@cloudflare/vite-plugin")}`
+  });
+  if (usesTypescript(ctx)) {
+    updateTsconfigJson();
+  }
 };
+function updateTsconfigJson() {
+  const s = spinner();
+  s.start(`Updating tsconfig.json config`);
+  const tsconfig = readJSON("tsconfig.json");
+  if (tsconfig && typeof tsconfig === "object") {
+    tsconfig.references ??= [];
+    tsconfig.references.push({ path: "./tsconfig.worker.json" });
+  }
+  writeJSON("tsconfig.json", tsconfig);
+  s.stop(`${brandColor(`updated`)} ${dim(`\`tsconfig.json\``)}`);
+}
 var config12 = {
   configVersion: 1,
   id: "vue",
   frameworkCli: "create-vue",
   platform: "workers",
   displayName: "Vue",
+  path: "templates-experimental/vue",
   copyFiles: {
-    path: "./templates"
+    async selectVariant(ctx) {
+      return usesTypescript(ctx) ? "ts" : "js";
+    },
+    variants: {
+      ts: {
+        path: "./ts"
+      },
+      js: {
+        path: "./js"
+      }
+    }
   },
-  path: "templates-experimental/vue",
+  configure: configure9,
   generate: generate11,
-  transformPackageJson: async () => ({
+  transformPackageJson: async (_3, ctx) => ({
     scripts: {
       deploy: `${npm8} run build && wrangler deploy`,
-      preview: `${npm8} run build && wrangler dev`
+      preview: `${npm8} run build && wrangler dev`,
+      ...usesTypescript(ctx) && { "cf-typegen": `wrangler types` }
     }
   }),
   devScript: "dev",
@@ -76728,7 +76775,7 @@ var generate12 = async (ctx) => {
   ]);
   logRaw("");
 };
-var configure9 = async (ctx) => {
+var configure10 = async (ctx) => {
   if (pm2 === "pnpm" || pm2 === "yarn" || pm2 === "bun") {
     const packages = [];
     packages.push("nitropack");
@@ -76806,7 +76853,7 @@ var config13 = {
     path: "./templates"
   },
   generate: generate12,
-  configure: configure9,
+  configure: configure10,
   transformPackageJson: async () => ({
     scripts: {
       preview: `${npm9} run build && wrangler pages dev`,
@@ -76831,7 +76878,7 @@ var generate13 = async (ctx) => {
   ]);
   logRaw("");
 };
-var configure10 = async (ctx) => {
+var configure11 = async (ctx) => {
   updateAngularJson2(ctx);
   await updateAppCode2();
   await installCFWorker2();
@@ -76895,7 +76942,7 @@ var config14 = {
   deployScript: "deploy",
   previewScript: "start",
   generate: generate13,
-  configure: configure10,
+  configure: configure11,
   transformPackageJson: async () => ({
     scripts: {
       start: `${npm10} run build && wrangler pages dev dist/cloudflare ${await compatDateFlag()}`,
@@ -76914,7 +76961,7 @@ var generate14 = async (ctx) => {
   await runFrameworkGenerator(ctx, [ctx.project.name, "--no-install"]);
   logRaw("");
 };
-var configure11 = async () => {
+var configure12 = async () => {
   await runCommand([npx3, "astro", "add", "cloudflare", "-y"], {
     silent: true,
     startText: "Installing adapter",
@@ -76971,7 +77018,7 @@ var config15 = {
   deployScript: "deploy",
   previewScript: "preview",
   generate: generate14,
-  configure: configure11,
+  configure: configure12,
   transformPackageJson: async (pkgJson, ctx) => ({
     scripts: {
       deploy: `astro build && wrangler pages deploy`,
@@ -77170,7 +77217,7 @@ var generate18 = async (ctx) => {
   ]);
   logRaw("");
 };
-var configure12 = async (ctx) => {
+var configure13 = async (ctx) => {
   const indexFile = "src/index.ts";
   const s = spinner();
   s.start(`Updating \`${indexFile}\``);
@@ -77195,7 +77242,7 @@ var config20 = {
   },
   platform: "workers",
   generate: generate18,
-  configure: configure12,
+  configure: configure13,
   transformPackageJson: async () => ({
     scripts: {
       dev: "wrangler dev",
@@ -77237,7 +77284,7 @@ var updateNextConfig2 = (usesTs) => {
   writeFile2(configFile, updatedConfigFile);
   s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
 };
-var configure13 = async (ctx) => {
+var configure14 = async (ctx) => {
   const projectPath = ctx.project.path;
   const path6 = probePaths([
     `${projectPath}/pages/api`,
@@ -77319,7 +77366,7 @@ var c3_default26 = {
   platform: "pages",
   displayName: "Next.js",
   generate: generate19,
-  configure: configure13,
+  configure: configure14,
   copyFiles: {
     async selectVariant(ctx) {
       const isApp = probePaths([
@@ -77389,7 +77436,7 @@ var generate20 = async (ctx) => {
   writeFile2("./.node-version", "18");
   logRaw("");
 };
-var configure14 = async (ctx) => {
+var configure15 = async (ctx) => {
   const packages = ["nitro-cloudflare-dev"];
   if (pm3 === "pnpm") {
     packages.push("h3");
@@ -77458,7 +77505,7 @@ var config21 = {
     path: "./templates"
   },
   generate: generate20,
-  configure: configure14,
+  configure: configure15,
   transformPackageJson: async () => ({
     scripts: {
       deploy: `${npm15} run build && wrangler pages deploy`,
@@ -77648,7 +77695,7 @@ var c3_default29 = {
   })
 };
 function buildConfigure(params) {
-  return async function configure21(ctx) {
+  return async function configure22(ctx) {
     const loginSuccess = await params.login(ctx);
     if (!loginSuccess) {
       throw new Error("Failed to login to Cloudflare");
@@ -77694,7 +77741,7 @@ var { npm: npm16, npx: npx5, name: name2 } = detectPackageManager();
 var generate21 = async (ctx) => {
   await runFrameworkGenerator(ctx, ["playground", ctx.project.name]);
 };
-var configure15 = async (ctx) => {
+var configure16 = async (ctx) => {
   const cmd = [name2 === "pnpm" ? npm16 : npx5, "qwik", "add", "cloudflare-pages"];
   endSection(`Running ${quoteShellArgs(cmd)}`);
   await runCommand(cmd);
@@ -77781,7 +77828,7 @@ var config22 = {
     path: "./templates"
   },
   generate: generate21,
-  configure: configure15,
+  configure: configure16,
   transformPackageJson: async () => ({
     scripts: {
       deploy: `${npm16} run build && wrangler pages deploy`,
@@ -77863,7 +77910,7 @@ var generate23 = async (ctx) => {
   ]);
   logRaw("");
 };
-var configure16 = async (ctx) => {
+var configure17 = async (ctx) => {
   await installPackages(["@cloudflare/vite-plugin"], {
     dev: true,
     startText: "Installing the Cloudflare Vite plugin",
@@ -77871,7 +77918,7 @@ var configure16 = async (ctx) => {
   });
   await transformViteConfig(ctx);
   if (usesTypescript(ctx)) {
-    updateTsconfigJson();
+    updateTsconfigJson2();
   }
 };
 function transformViteConfig(ctx) {
@@ -77908,7 +77955,7 @@ function transformViteConfig(ctx) {
 function isPluginsProp(prop) {
   return (t.Property.check(prop) || t.ObjectProperty.check(prop)) && t.Identifier.check(prop.key) && prop.key.name === "plugins";
 }
-function updateTsconfigJson() {
+function updateTsconfigJson2() {
   const s = spinner();
   s.start(`Updating tsconfig.json config`);
   const tsconfig = readJSON("tsconfig.json");
@@ -77971,7 +78018,7 @@ var config24 = {
     }
   },
   generate: generate23,
-  configure: configure16,
+  configure: configure17,
   transformPackageJson: async (_3, ctx) => ({
     scripts: {
       deploy: `${npm18} run build && wrangler deploy`,
@@ -78002,7 +78049,7 @@ var generate24 = async (ctx) => {
   ]);
   logRaw("");
 };
-var configure17 = async () => {
+var configure18 = async () => {
   const typeDefsPath = "load-context.ts";
   const s = spinner();
   s.start(`Updating \`${typeDefsPath}\``);
@@ -78027,7 +78074,7 @@ var config26 = {
     path: "./templates"
   },
   generate: generate24,
-  configure: configure17,
+  configure: configure18,
   transformPackageJson: async () => ({
     scripts: {
       deploy: `${npm19} run build && wrangler pages deploy`,
@@ -78067,7 +78114,7 @@ var generate25 = async (ctx) => {
   await runFrameworkGenerator(ctx, ["-p", ctx.project.name, "-s"]);
   logRaw("");
 };
-var configure18 = async (ctx) => {
+var configure19 = async (ctx) => {
   usesTypescript(ctx);
   const filePath = `app.config.${usesTypescript(ctx) ? "ts" : "js"}`;
   updateStatus(`Updating configuration in ${blue(filePath)}`);
@@ -78115,7 +78162,7 @@ var config27 = {
     path: "./templates"
   },
   generate: generate25,
-  configure: configure18,
+  configure: configure19,
   transformPackageJson: async () => ({
     scripts: {
       preview: `${npm20} run build && npx wrangler pages dev`,
@@ -78138,7 +78185,7 @@ var generate26 = async (ctx) => {
   await runFrameworkGenerator(ctx, ["create", ctx.project.name]);
   logRaw("");
 };
-var configure19 = async (ctx) => {
+var configure20 = async (ctx) => {
   const pkg = `@sveltejs/adapter-cloudflare`;
   await installPackages([pkg], {
     dev: true,
@@ -78230,7 +78277,7 @@ var config28 = {
     path: "./templates"
   },
   generate: generate26,
-  configure: configure19,
+  configure: configure20,
   transformPackageJson: async (original, ctx) => {
     let scripts = {
       preview: `${npm21} run build && wrangler pages dev`,
@@ -78279,7 +78326,7 @@ var c3_default39 = config29;
 var import_node_assert = __toESM(require("node:assert"));
 
 // ../wrangler/package.json
-var version2 = "3.113.0";
+var version2 = "3.114.0";
 
 // src/git.ts
 var offerGit = async (ctx) => {
@@ -81755,7 +81802,7 @@ var runCli = async (args) => {
   printBanner(args);
   const ctx = await createContext(args);
   await create(ctx);
-  await configure20(ctx);
+  await configure21(ctx);
   await deploy(ctx);
   printSummary(ctx);
   logRaw("");
@@ -81783,7 +81830,7 @@ var create = async (ctx) => {
   await rectifyPmMismatch(ctx);
   endSection(`Application created`);
 };
-var configure20 = async (ctx) => {
+var configure21 = async (ctx) => {
   startSection("Configuring your application for Cloudflare", "Step 2 of 3");
   await installWrangler();
   await installWorkersTypes(ctx);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cloudflare",
-  "version": "2.40.2",
+  "version": "2.40.3",
   "description": "A CLI for creating and deploying new applications to Cloudflare.",
   "keywords": [
     "cloudflare",
@@ -70,12 +70,12 @@
     "wrap-ansi": "^9.0.0",
     "xdg-app-paths": "^8.3.0",
     "yargs": "^17.7.2",
-    "@cloudflare/cli": "1.1.1",
     "@cloudflare/mock-npm-registry": "0.0.0",
-    "@cloudflare/workers-tsconfig": "0.0.0",
+    "@cloudflare/cli": "1.1.1",
     "@cloudflare/eslint-config-worker": "1.1.0",
-    "wrangler": "3.113.0",
-    "@cloudflare/vite-plugin": "0.1.9"
+    "@cloudflare/vite-plugin": "0.1.9",
+    "@cloudflare/workers-tsconfig": "0.0.0",
+    "wrangler": "3.114.0"
   },
   "engines": {
     "node": ">=18.14.1"

package/templates/hello-world/js/package.json

@@ -9,8 +9,8 @@
 		"test": "vitest"
 	},
 	"devDependencies": {
-		"@cloudflare/vitest-pool-workers": "^0.6.4",
+		"@cloudflare/vitest-pool-workers": "^0.7.5",
 		"wrangler": "^3.101.0",
-		"vitest": "~2.1.9"
+		"vitest": "~3.0.7"
 	}
 }

package/templates/hello-world/ts/package.json

@@ -10,9 +10,9 @@
 		"cf-typegen": "wrangler types"
 	},
 	"devDependencies": {
-		"@cloudflare/vitest-pool-workers": "^0.6.4",
+		"@cloudflare/vitest-pool-workers": "^0.7.5",
 		"typescript": "^5.5.2",
-		"vitest": "~2.1.9",
+		"vitest": "~3.0.7",
 		"wrangler": "^3.101.0"
 	}
 }

package/templates-experimental/hello-world-with-assets/js/package.json

@@ -9,8 +9,8 @@
 		"test": "vitest"
 	},
 	"devDependencies": {
-		"@cloudflare/vitest-pool-workers": "^0.6.4",
+		"@cloudflare/vitest-pool-workers": "^0.7.5",
 		"wrangler": "^3.101.0",
-		"vitest": "~2.1.9"
+		"vitest": "~3.0.7"
 	}
 }

package/templates-experimental/hello-world-with-assets/ts/package.json

@@ -10,9 +10,9 @@
 		"cf-typegen": "wrangler types"
 	},
 	"devDependencies": {
-		"@cloudflare/vitest-pool-workers": "^0.6.4",
+		"@cloudflare/vitest-pool-workers": "^0.7.5",
 		"typescript": "^5.5.2",
-		"vitest": "~2.1.9",
+		"vitest": "~3.0.7",
 		"wrangler": "^3.101.0"
 	}
 }

package/templates-experimental/vue/c3.ts

@@ -1,29 +1,94 @@
+import { logRaw } from "@cloudflare/cli";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { inputPrompt, spinner } from "@cloudflare/cli/interactive";
 import { runFrameworkGenerator } from "frameworks/index";
+import { readJSON, usesTypescript, writeJSON } from "helpers/files";
 import { detectPackageManager } from "helpers/packageManagers";
+import { installPackages } from "helpers/packages";
 import type { TemplateConfig } from "../../src/templates";
 import type { C3Context } from "types";
 
 const { npm } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, [ctx.project.name]);
+	const lang =
+		ctx.args.lang ??
+		(await inputPrompt({
+			type: "select",
+			question: "Would you like to use TypeScript?",
+			label: "Language",
+			options: [
+				{ label: "TypeScript", value: "ts" },
+				{ label: "JavaScript", value: "js" },
+			],
+		}));
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--router",
+		lang === "ts" ? "--ts" : "",
+	]);
+	logRaw("");
 };
 
+const configure = async (ctx: C3Context) => {
+	await installPackages(["@cloudflare/vite-plugin"], {
+		dev: true,
+		startText: "Installing the Cloudflare Vite plugin",
+		doneText: `${brandColor(`installed`)} ${dim("@cloudflare/vite-plugin")}`,
+	});
+
+	if (usesTypescript(ctx)) {
+		updateTsconfigJson();
+	}
+};
+
+function updateTsconfigJson() {
+	const s = spinner();
+	s.start(`Updating tsconfig.json config`);
+	// Add a reference to the extra tsconfig.worker.json file.
+	// ```
+	// "references": [ ..., { path: "./tsconfig.worker.json" } ]
+	// ```
+	const tsconfig = readJSON("tsconfig.json") as { references: object[] };
+	if (tsconfig && typeof tsconfig === "object") {
+		tsconfig.references ??= [];
+		tsconfig.references.push({ path: "./tsconfig.worker.json" });
+	}
+	writeJSON("tsconfig.json", tsconfig);
+	s.stop(`${brandColor(`updated`)} ${dim(`\`tsconfig.json\``)}`);
+}
+
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "vue",
 	frameworkCli: "create-vue",
 	platform: "workers",
 	displayName: "Vue",
+	path: "templates-experimental/vue",
 	copyFiles: {
-		path: "./templates",
+		async selectVariant(ctx) {
+			// Note: this `selectVariant` function should not be needed
+			//       this is just a quick workaround until
+			//       https://github.com/cloudflare/workers-sdk/issues/7495
+			//       is resolved
+			return usesTypescript(ctx) ? "ts" : "js";
+		},
+		variants: {
+			ts: {
+				path: "./ts",
+			},
+			js: {
+				path: "./js",
+			},
+		},
 	},
-	path: "templates-experimental/vue",
+	configure,
 	generate,
-	transformPackageJson: async () => ({
+	transformPackageJson: async (_, ctx) => ({
 		scripts: {
 			deploy: `${npm} run build && wrangler deploy`,
 			preview: `${npm} run build && wrangler dev`,
+			...(usesTypescript(ctx) && { "cf-typegen": `wrangler types` }),
 		},
 	}),
 	devScript: "dev",

package/templates-experimental/vue/js/server/index.js

@@ -0,0 +1,13 @@
+export default {
+	fetch(request, env) {
+		const url = new URL(request.url);
+
+		if (url.pathname.startsWith("/api/")) {
+			return Response.json({
+				name: "Cloudflare",
+			});
+		}
+
+		return env.ASSETS.fetch(request);
+	},
+};

package/templates-experimental/vue/js/src/App.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { RouterLink, RouterView } from 'vue-router'
+import HelloWorld from './components/HelloWorld.vue'
+import { ref } from 'vue'
+
+const name = ref('Unknown')
+
+const getName = async () => {
+  const res = await fetch('/api/')
+  const data = await res.json()
+  name.value = data.name
+}
+</script>
+
+<template>
+  <header>
+    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
+
+    <div class="wrapper">
+      <HelloWorld msg="You did it!" />
+      <button class="green" @click="getName" aria-label="get name">
+        Name from API is: {{ name }}
+      </button>
+      <p>Edit <code>server/index.js</code> to change what the API gets</p>
+      <nav>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
+      </nav>
+    </div>
+  </header>
+
+  <RouterView />
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+  max-height: 100vh;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+nav {
+  width: 100%;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 2rem;
+}
+
+nav a.router-link-exact-active {
+  color: var(--color-text);
+}
+
+nav a.router-link-exact-active:hover {
+  background-color: transparent;
+}
+
+nav a {
+  display: inline-block;
+  padding: 0 1rem;
+  border-left: 1px solid var(--color-border);
+}
+
+nav a:first-of-type {
+  border: 0;
+}
+
+button {
+  background-color: hsla(160, 100%, 37%, 1);
+  color: var(--color-background);
+  border: 0;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  margin: 1rem 0 0.5rem 0;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  nav {
+    text-align: left;
+    margin-left: -1rem;
+    font-size: 1rem;
+
+    padding: 1rem 0;
+    margin-top: 1rem;
+  }
+}
+</style>

package/templates-experimental/vue/js/src/components/HelloWorld.vue

@@ -0,0 +1,47 @@
+<script setup>
+defineProps({
+  msg: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      You’ve successfully created a project with
+      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a> +
+      <a href="https://developers.cloudflare.com/workers/" target="_blank" rel="noopener"
+        >Cloudflare Workers</a
+      >. What's next?
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>

package/templates-experimental/vue/js/vite.config.js

@@ -0,0 +1,21 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+import { cloudflare } from "@cloudflare/vite-plugin"
+
+// https://vite.dev/config/
+export default defineConfig({
+	plugins: [
+		vue(),
+		vueDevTools(),
+		cloudflare()
+	],
+	resolve: {
+		alias: {
+			'@': fileURLToPath(new URL('./src', import.meta.url))
+		},
+	},
+})

package/templates-experimental/vue/js/wrangler.jsonc

@@ -0,0 +1,12 @@
+{
+	"name": "<TBD>",
+	"compatibility_date": "<TBD>",
+	"main": "server/index.ts",
+	"assets": {
+		"not_found_handling": "single-page-application",
+		"binding": "ASSETS"
+	},
+	"observability": {
+		"enabled": true
+	}
+}

package/templates-experimental/vue/ts/server/index.ts

@@ -0,0 +1,13 @@
+export default {
+	fetch(request, env) {
+		const url = new URL(request.url);
+
+		if (url.pathname.startsWith("/api/")) {
+			return Response.json({
+				name: "Cloudflare",
+			});
+		}
+
+		return env.ASSETS.fetch(request);
+	},
+} satisfies ExportedHandler<Env>;

package/templates-experimental/vue/ts/src/App.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
+import HelloWorld from './components/HelloWorld.vue'
+import { ref } from 'vue'
+
+const name = ref('Unknown')
+
+const getName = async () => {
+  const res = await fetch('/api/')
+  const data = await res.json()
+  name.value = data.name
+}
+</script>
+
+<template>
+  <header>
+    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
+
+    <div class="wrapper">
+      <HelloWorld msg="You did it!" />
+      <button class="green" @click="getName" aria-label="get name">
+        Name from API is: {{ name }}
+      </button>
+      <p>Edit <code>server/index.ts</code> to change what the API gets</p>
+      <nav>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
+      </nav>
+    </div>
+  </header>
+
+  <RouterView />
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+  max-height: 100vh;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+nav {
+  width: 100%;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 2rem;
+}
+
+nav a.router-link-exact-active {
+  color: var(--color-text);
+}
+
+nav a.router-link-exact-active:hover {
+  background-color: transparent;
+}
+
+nav a {
+  display: inline-block;
+  padding: 0 1rem;
+  border-left: 1px solid var(--color-border);
+}
+
+nav a:first-of-type {
+  border: 0;
+}
+
+button {
+  background-color: hsla(160, 100%, 37%, 1);
+  color: var(--color-background);
+  border: 0;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  margin: 1rem 0 0.5rem 0;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  nav {
+    text-align: left;
+    margin-left: -1rem;
+    font-size: 1rem;
+
+    padding: 1rem 0;
+    margin-top: 1rem;
+  }
+}
+</style>

package/templates-experimental/vue/ts/src/components/HelloWorld.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+defineProps<{
+  msg: string
+}>()
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      You’ve successfully created a project with
+      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a> +
+      <a href="https://developers.cloudflare.com/workers/" target="_blank" rel="noopener"
+        >Cloudflare Workers</a
+      >. What's next?
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>

package/templates-experimental/vue/ts/tsconfig.worker.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.node.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.worker.tsbuildinfo",
+    "types": ["@cloudflare/workers-types/2023-07-01", "./worker-configuration.d.ts","vite/client"],
+  },
+  "include": ["server"],
+}

package/templates-experimental/vue/ts/vite.config.ts

@@ -0,0 +1,21 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+import { cloudflare } from "@cloudflare/vite-plugin"
+
+// https://vite.dev/config/
+export default defineConfig({
+	plugins: [
+		vue(),
+		vueDevTools(),
+		cloudflare()
+	],
+	resolve: {
+		alias: {
+			'@': fileURLToPath(new URL('./src', import.meta.url))
+		},
+	},
+})

package/templates-experimental/vue/ts/worker-configuration.d.ts

@@ -0,0 +1,6 @@
+// Generated by Wrangler by running `wrangler types`
+// After adding bindings to `wrangler.jsonc`, regenerate this interface via `npm run cf-typegen`
+
+interface Env {
+	ASSETS: Fetcher;
+}

package/templates-experimental/vue/ts/wrangler.jsonc

@@ -0,0 +1,12 @@
+{
+	"name": "<TBD>",
+	"compatibility_date": "<TBD>",
+	"main": "server/index.ts",
+	"assets": {
+		"not_found_handling": "single-page-application",
+		"binding": "ASSETS"
+	},
+	"observability": {
+		"enabled": true
+	}
+}

package/templates-experimental/vue/templates/wrangler.jsonc

@@ -1,10 +0,0 @@
-{
-  "name": "<TBD>",
-  "compatibility_date": "<TBD>",
-  "assets": {
-    "directory": "./dist"
-  },
-  "observability": {
-    "enabled": true
-  }
-}