Support Nuxt in autoconfig (#11477)

* Support Nuxt in autoconfig

* Lint

* Lint

* Update changeset to match others

* Snap

Author: ascorbic

.changeset/breezy-apes-lose.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": minor
+---
+
+Support Nuxt in autoconfig `--experimental` flow

.changeset/cruel-chairs-train.md

@@ -0,0 +1,5 @@
+---
+"wrangler": minor
+---
+
+Support Nuxt in autoconfig

packages/create-cloudflare/e2e/tests/cli/cli.test.ts

@@ -524,7 +524,7 @@ describe("Create Cloudflare CLI", () => {
 
 	describe("help text", () => {
 		test("--help", async ({ logStream }) => {
-			if (!isExperimental) {
+			if (isExperimental) {
 				const { output } = await runC3(
 					["--help", "--experimental"],
 					[],
@@ -555,7 +555,7 @@ describe("Create Cloudflare CLI", () => {
 					    npm create cloudflare -- --framework next -- --ts
 					    pnpm create cloudflare --framework next -- --ts
 					    Allowed Values:
-					      gatsby, svelte, docusaurus, astro, tanstack-start, angular, solid, qwik, vue, react, react-router
+					      angular, astro, docusaurus, gatsby, nuxt, qwik, react, react-router, solid, svelte, tanstack-start, vue
 					  --platform=<value>
 					    Whether the application should be deployed to Pages or Workers. This is only applicable for Frameworks templates that support both Pages and Workers.
 					    Allowed Values:

packages/create-cloudflare/e2e/tests/frameworks/test-config.ts

@@ -786,6 +786,30 @@ function getExperimentalFrameworkTestConfig(
 			flags: ["--style", "sass"],
 			verifyTypes: false,
 		},
+		{
+			name: "nuxt:workers",
+			promptHandlers: [
+				{
+					matcher: /Would you like to install any of the official modules\?/,
+					input: [keys.enter],
+				},
+			],
+			argv: ["--platform", "workers"],
+			testCommitMessage: true,
+			timeout: LONG_TIMEOUT,
+			unsupportedOSs: ["win32"],
+			verifyDeploy: {
+				route: "/",
+				expectedText: "Welcome to Nuxt!",
+			},
+			verifyPreview: {
+				previewArgs: ["--inspector-port=0"],
+				route: "/test",
+				expectedText: "C3_TEST",
+			},
+			nodeCompat: false,
+			verifyTypes: false,
+		},
 		{
 			name: "solid",
 			promptHandlers: [

packages/create-cloudflare/src/templates.ts

@@ -237,17 +237,18 @@ export type TemplateMap = Record<
 export function getFrameworkMap({ experimental = false }): TemplateMap {
 	if (experimental) {
 		return {
-			gatsby: gatsbyTemplate,
-			svelte: svelteTemplate,
-			docusaurus: docusaurusTemplate,
-			astro: astroTemplate,
-			"tanstack-start": tanStackStartTemplate,
 			angular: angularTemplate,
-			solid: solidTemplate,
+			astro: astroTemplate,
+			docusaurus: docusaurusTemplate,
+			gatsby: gatsbyTemplate,
+			nuxt: nuxtTemplate,
 			qwik: qwikTemplate,
-			vue: vueTemplate,
 			react: reactTemplate,
 			"react-router": reactRouterTemplate,
+			solid: solidTemplate,
+			svelte: svelteTemplate,
+			"tanstack-start": tanStackStartTemplate,
+			vue: vueTemplate,
 		};
 	} else {
 		return {

packages/wrangler/src/autoconfig/frameworks/get-framework.ts

@@ -1,5 +1,6 @@
 import { Angular } from "./angular";
 import { Astro } from "./astro";
+import { Nuxt } from "./nuxt";
 import { Qwik } from "./qwik";
 import { ReactRouter } from "./react-router";
 import { SolidStart } from "./solid-start";
@@ -23,6 +24,8 @@ export function getFramework(detectedFramework?: {
 			return new ReactRouter(detectedFramework.name);
 		case "angular":
 			return new Angular(detectedFramework.name);
+		case "nuxt":
+			return new Nuxt(detectedFramework.name);
 		case "solid-start":
 			return new SolidStart(detectedFramework.name);
 		case "qwik":

packages/wrangler/src/autoconfig/frameworks/nuxt.ts

@@ -0,0 +1,83 @@
+import path from "node:path";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import * as recast from "recast";
+import { mergeObjectProperties, transformFile } from "../c3-vendor/codemod";
+import { installPackages } from "../c3-vendor/packages";
+import { Framework } from ".";
+import type { ConfigurationOptions, ConfigurationResults } from ".";
+
+const updateNuxtConfig = (projectPath: string) => {
+	const configFile = path.join(projectPath, "nuxt.config.ts");
+
+	const b = recast.types.builders;
+
+	const presetDef = b.objectProperty(
+		b.identifier("nitro"),
+		b.objectExpression([
+			b.objectProperty(
+				b.identifier("preset"),
+				b.stringLiteral("cloudflare_module")
+			),
+			b.objectProperty(
+				b.identifier("cloudflare"),
+				b.objectExpression([
+					b.objectProperty(
+						b.identifier("deployConfig"),
+						b.booleanLiteral(true)
+					),
+					b.objectProperty(b.identifier("nodeCompat"), b.booleanLiteral(true)),
+				])
+			),
+		])
+	);
+
+	const moduleDef = b.objectProperty(
+		b.identifier("modules"),
+		b.arrayExpression([b.stringLiteral("nitro-cloudflare-dev")])
+	);
+
+	transformFile(configFile, {
+		visitCallExpression: function (n) {
+			const callee = n.node.callee as recast.types.namedTypes.Identifier;
+			if (callee.name === "defineNuxtConfig") {
+				mergeObjectProperties(
+					n.node.arguments[0] as recast.types.namedTypes.ObjectExpression,
+					[presetDef, moduleDef]
+				);
+			}
+
+			return this.traverse(n);
+		},
+	});
+};
+
+export class Nuxt extends Framework {
+	async configure({
+		dryRun,
+		projectPath,
+	}: ConfigurationOptions): Promise<ConfigurationResults> {
+		if (!dryRun) {
+			await installPackages(["nitro-cloudflare-dev"], {
+				dev: true,
+				startText: "Installing the Cloudflare dev module",
+				doneText: `${brandColor(`installed`)} ${dim("nitro-cloudflare-dev")}`,
+			});
+			updateNuxtConfig(projectPath);
+		}
+
+		return {
+			wranglerConfig: {
+				main: "./.output/server/index.mjs",
+				assets: {
+					binding: "ASSETS",
+					directory: "./.output/public/",
+				},
+				observability: {
+					enabled: true,
+				},
+			},
+		};
+	}
+
+	configurationDescription = "Configuring project for Nuxt";
+}