create-better-t-stack 2.28.5 → 2.29.0

package/dist/index.js

@@ -100,10 +100,14 @@ const dependencyVersionMap = {
 	"@trpc/tanstack-react-query": "^11.4.2",
 	"@trpc/server": "^11.4.2",
 	"@trpc/client": "^11.4.2",
-	convex: "^1.25.0",
+	convex: "^1.25.4",
 	"@convex-dev/react-query": "^0.0.0-alpha.8",
 	"convex-svelte": "^0.0.11",
+	"convex-nuxt": "0.1.5",
+	"convex-vue": "^0.1.5",
 	"@tanstack/svelte-query": "^5.74.4",
+	"@tanstack/vue-query-devtools": "^5.83.0",
+	"@tanstack/vue-query": "^5.83.0",
 	"@tanstack/react-query-devtools": "^5.80.5",
 	"@tanstack/react-query": "^5.80.5",
 	"@tanstack/solid-query": "^5.75.0",
@@ -471,7 +475,7 @@ async function getAuthChoice(auth, hasDatabase, backend) {
 //#region src/prompts/backend.ts
 async function getBackendFrameworkChoice(backendFramework, frontends) {
 	if (backendFramework !== void 0) return backendFramework;
-	const hasIncompatibleFrontend = frontends?.some((f) => f === "nuxt" || f === "solid");
+	const hasIncompatibleFrontend = frontends?.some((f) => f === "solid");
 	const backendOptions = [
 		{
 			value: "hono",
@@ -509,12 +513,10 @@ async function getBackendFrameworkChoice(backendFramework, frontends) {
 		label: "None",
 		hint: "No backend server"
 	});
-	let initialValue = DEFAULT_CONFIG.backend;
-	if (hasIncompatibleFrontend && initialValue === "convex") initialValue = "hono";
 	const response = await select({
 		message: "Select backend",
 		options: backendOptions,
-		initialValue
+		initialValue: DEFAULT_CONFIG.backend
 	});
 	if (isCancel(response)) {
 		cancel(pc.red("Operation cancelled"));
@@ -754,7 +756,7 @@ async function getFrontendChoice(frontendOptions, backend) {
 			}
 		];
 		const webOptions = allWebOptions.filter((option) => {
-			if (backend === "convex") return option.value !== "nuxt" && option.value !== "solid";
+			if (backend === "convex") return option.value !== "solid";
 			return true;
 		});
 		const webFramework = await select({
@@ -1466,7 +1468,7 @@ function processAndValidateFlags(options, providedFlags, projectName) {
 			process.exit(1);
 		}
 		if (providedFlags.has("frontend") && options.frontend) {
-			const incompatibleFrontends = options.frontend.filter((f) => f === "nuxt" || f === "solid");
+			const incompatibleFrontends = options.frontend.filter((f) => f === "solid");
 			if (incompatibleFrontends.length > 0) {
 				consola$1.fatal(`The following frontends are not compatible with '--backend convex': ${incompatibleFrontends.join(", ")}. Please choose a different frontend or backend.`);
 				process.exit(1);
@@ -3010,6 +3012,8 @@ async function setupApi(config) {
 			} else if (hasNuxtWeb) {
 				if (api === "orpc") await addPackageDependency({
 					dependencies: [
+						"@tanstack/vue-query",
+						"@tanstack/vue-query-devtools",
 						"@orpc/tanstack-query",
 						"@orpc/client",
 						"@orpc/server"
@@ -3113,6 +3117,10 @@ async function setupApi(config) {
 				const webDepsToAdd = ["convex"];
 				if (frontend.includes("tanstack-start")) webDepsToAdd.push("@convex-dev/react-query");
 				if (hasSvelteWeb) webDepsToAdd.push("convex-svelte");
+				if (hasNuxtWeb) {
+					webDepsToAdd.push("convex-nuxt");
+					webDepsToAdd.push("convex-vue");
+				}
 				await addPackageDependency({
 					dependencies: webDepsToAdd,
 					projectDir: webDir
@@ -4903,7 +4911,7 @@ function getBunWebNativeWarning() {
 	return `\n${pc.yellow("WARNING:")} 'bun' might cause issues with web + native apps in a monorepo. Use 'pnpm' if problems arise.`;
 }
 function getWorkersDeployInstructions(runCmd) {
-	return `\n${pc.bold("Deploy frontend to Cloudflare Workers:")}\n${pc.cyan("•")} Deploy: ${`cd apps/web && ${runCmd || "bun run"} deploy`}`;
+	return `\n${pc.bold("Deploy frontend to Cloudflare Workers:")}\n${pc.cyan("•")} Deploy: ${`cd apps/web && ${runCmd} run deploy`}`;
 }
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-better-t-stack",
-  "version": "2.28.5",
+  "version": "2.29.0",
   "description": "A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
   "type": "module",
   "license": "MIT",

package/templates/backend/convex/packages/backend/package.json.hbs

@@ -9,9 +9,9 @@
   "license": "ISC",
   "description": "",
   "devDependencies": {
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.2"
   },
   "dependencies": {
-    "convex": "^1.25.0"
+    "convex": "^1.25.4"
   }
 }

package/templates/examples/todo/web/nuxt/app/pages/todos.vue.hbs

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+{{#if (eq backend "convex")}}
+import { api } from "@{{ projectName }}/backend/convex/_generated/api";
+import type { Id } from "@{{ projectName }}/backend/convex/_generated/dataModel";
+import { useConvexMutation, useConvexQuery } from "convex-vue";
+
+const { data, error, isPending } = useConvexQuery(api.todos.getAll, {});
+
+const newTodoText = ref("");
+const { mutate: createTodo, isPending: isCreatePending } = useConvexMutation(api.todos.create);
+
+const { mutate: toggleTodo } = useConvexMutation(api.todos.toggle);
+const { mutate: deleteTodo, error: deleteError } = useConvexMutation(
+  api.todos.deleteTodo,
+);
+
+function handleAddTodo() {
+  const text = newTodoText.value.trim();
+  if (!text) return;
+
+  createTodo({ text });
+  newTodoText.value = "";
+}
+
+function handleToggleTodo(id: Id<"todos">, completed: boolean) {
+  toggleTodo({ id, completed: !completed });
+}
+
+function handleDeleteTodo(id: Id<"todos">) {
+  deleteTodo({ id });
+}
+{{else}}
+import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
+
+const { $orpc } = useNuxtApp()
+
+const newTodoText = ref('')
+const queryClient = useQueryClient()
+
+const todos = useQuery($orpc.todo.getAll.queryOptions())
+
+const createMutation = useMutation($orpc.todo.create.mutationOptions({
+  onSuccess: () => {
+    queryClient.invalidateQueries()
+    newTodoText.value = ''
+  }
+}))
+
+const toggleMutation = useMutation($orpc.todo.toggle.mutationOptions({
+  onSuccess: () => queryClient.invalidateQueries()
+}))
+
+const deleteMutation = useMutation($orpc.todo.delete.mutationOptions({
+  onSuccess: () => queryClient.invalidateQueries()
+}))
+
+function handleAddTodo() {
+  if (newTodoText.value.trim()) {
+    createMutation.mutate({ text: newTodoText.value })
+  }
+}
+
+function handleToggleTodo(id: number, completed: boolean) {
+  toggleMutation.mutate({ id, completed: !completed })
+}
+
+function handleDeleteTodo(id: number) {
+  deleteMutation.mutate({ id })
+}
+{{/if}}
+</script>
+
+<template>
+  <div class="mx-auto w-full max-w-md py-10">
+    <UCard>
+      <template #header>
+        <div>
+          <div class="text-xl font-bold">Todo List</div>
+          <div class="text-muted text-sm">Manage your tasks efficiently</div>
+        </div>
+      </template>
+      <form @submit.prevent="handleAddTodo" class="mb-6 flex items-center gap-2">
+        <UInput
+          v-model="newTodoText"
+          placeholder="Add a new task..."
+          autocomplete="off"
+          class="w-full"
+          {{#if (eq backend "convex")}}
+          :disabled="isCreatePending"
+          {{/if}}
+        />
+        <UButton
+          type="submit"
+          {{#if (eq backend "convex")}}
+          :disabled="isCreatePending || !newTodoText.trim()"
+          {{/if}}
+        >
+          {{#if (eq backend "convex")}}
+            <span v-if="isCreatePending">
+              <UIcon name="i-lucide-loader-2" class="animate-spin" />
+            </span>
+            <span v-else>Add</span>
+          {{else}}
+            Add
+          {{/if}}
+        </UButton>
+      </form>
+
+      {{#if (eq backend "convex")}}
+        <p v-if="error || deleteError" class="mb-4 text-red-500">
+          Error: \{{ error?.message || deleteError?.message }}
+        </p>
+        <div v-if="isPending" class="flex justify-center py-4">
+          <UIcon name="i-lucide-loader-2" class="animate-spin w-6 h-6" />
+        </div>
+        <p v-else-if="data?.length === 0" class="py-4 text-center">
+          No todos yet. Add one above!
+        </p>
+        <ul v-else-if="data" class="space-y-2">
+          <li
+            v-for="todo in data"
+            :key="todo._id"
+            class="flex items-center justify-between rounded-md border p-2"
+          >
+            <div class="flex items-center gap-2">
+              <UCheckbox
+                :model-value="todo.completed"
+                @update:model-value="() => handleToggleTodo(todo._id, todo.completed)"
+                :id="`todo-${todo._id}`"
+              />
+              <label
+                :for="`todo-${todo._id}`"
+                :class="{ 'line-through text-muted': todo.completed }"
+                class="cursor-pointer"
+              >
+                \{{ todo.text }}
+              </label>
+            </div>
+            <UButton
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              square
+              @click="handleDeleteTodo(todo._id)"
+              aria-label="Delete todo"
+              icon="i-lucide-trash-2"
+            />
+          </li>
+        </ul>
+      {{else}}
+        <div v-if="todos.status.value === 'pending'" class="flex justify-center py-4">
+          <UIcon name="i-lucide-loader-2" class="animate-spin w-6 h-6" />
+        </div>
+        <p v-else-if="todos.status.value === 'error'" class="py-4 text-center text-red-500">
+          Error: \{{ todos.error.value?.message || 'Failed to load todos' }}
+        </p>
+        <p v-else-if="todos.data.value?.length === 0" class="py-4 text-center">
+          No todos yet. Add one above!
+        </p>
+        <ul v-else class="space-y-2">
+          <li
+            v-for="todo in todos.data.value"
+            :key="todo.id"
+            class="flex items-center justify-between rounded-md border p-2"
+          >
+            <div class="flex items-center gap-2">
+              <UCheckbox
+                :model-value="todo.completed"
+                @update:model-value="() => handleToggleTodo(todo.id, todo.completed)"
+                :id="`todo-${todo.id}`"
+              />
+              <label
+                :for="`todo-${todo.id}`"
+                :class="{ 'line-through text-muted': todo.completed }"
+                class="cursor-pointer"
+              >
+                \{{ todo.text }}
+              </label>
+            </div>
+            <UButton
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              square
+              @click="handleDeleteTodo(todo.id)"
+              aria-label="Delete todo"
+              icon="i-lucide-trash-2"
+            />
+          </li>
+        </ul>
+      {{/if}}
+    </UCard>
+  </div>
+</template>

package/templates/frontend/nuxt/app/{app.vue → app.vue.hbs}

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+{{#if (eq api "orpc")}}
 import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
+{{/if}}
 </script>
 
 <template>
@@ -9,5 +11,7 @@ import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
             <NuxtPage />
         </NuxtLayout>
     </UApp>
+    {{#if (eq api "orpc")}}
     <VueQueryDevtools />
+    {{/if}}
 </template>

package/templates/frontend/nuxt/app/components/Header.vue.hbs

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { USeparator } from '#components';
 import ModeToggle from './ModeToggle.vue'
 {{#if auth}}
 import UserMenu from './UserMenu.vue'

package/templates/frontend/nuxt/app/components/{ModeToggle.vue → ModeToggle.vue.hbs}

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from "vue";
+
 const colorMode = useColorMode()
 
 const isDark = computed({

package/templates/frontend/nuxt/app/pages/index.vue.hbs

@@ -1,8 +1,13 @@
 <script setup lang="ts">
-{{#unless (eq api "none")}}
-const { $orpc } = useNuxtApp()
-import { useQuery } from '@tanstack/vue-query'
-{{/unless}}
+{{#if (eq backend "convex")}}
+import { api } from "@{{ projectName }}/backend/convex/_generated/api";
+import { useConvexQuery } from "convex-vue";
+{{else}}
+  {{#unless (eq api "none")}}
+  const { $orpc } = useNuxtApp()
+  import { useQuery } from '@tanstack/vue-query'
+  {{/unless}}
+{{/if}}
 
 const TITLE_TEXT = `
  ██████╗ ███████╗████████╗████████╗███████╗██████╗
@@ -20,19 +25,34 @@ const TITLE_TEXT = `
     ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
  `;
 
-{{#unless (eq api "none")}}
-const healthCheck = useQuery($orpc.healthCheck.queryOptions())
-{{/unless}}
+{{#if (eq backend "convex")}}
+const healthCheck = useConvexQuery(api.healthCheck.get, {});
+{{else}}
+  {{#unless (eq api "none")}}
+  const healthCheck = useQuery($orpc.healthCheck.queryOptions())
+  {{/unless}}
+{{/if}}
 </script>
 
 <template>
   <div class="container mx-auto max-w-3xl px-4 py-2">
     <pre class="overflow-x-auto font-mono text-sm whitespace-pre-wrap">\{{ TITLE_TEXT }}</pre>
     <div class="grid gap-6 mt-4">
-      {{#unless (eq api "none")}}
       <section class="rounded-lg border p-4">
         <h2 class="mb-2 font-medium">API Status</h2>
         <div class="flex items-center gap-2">
+          {{#if (eq backend "convex")}}
+            <span class="text-sm text-muted-foreground">
+              \{{
+                healthCheck === undefined
+                  ? "Checking..."
+                  : healthCheck.data.value === "OK"
+                    ? "Connected"
+                    : "Error"
+              }}
+            </span>
+          {{else}}
+            {{#unless (eq api "none")}}
             <div class="flex items-center gap-2">
               <div
                 class="w-2 h-2 rounded-full"
@@ -60,9 +80,10 @@ const healthCheck = useQuery($orpc.healthCheck.queryOptions())
                 </template>
               </span>
             </div>
-          </div>
+            {{/unless}}
+          {{/if}}
+        </div>
       </section>
-      {{/unless}}
     </div>
   </div>
 </template>

package/templates/frontend/nuxt/nuxt.config.ts.hbs

@@ -2,12 +2,22 @@
 export default defineNuxtConfig({
   compatibilityDate: 'latest',
   devtools: { enabled: true },
-  modules: ['@nuxt/ui'],
+  modules: [
+    '@nuxt/ui'
+    {{#if (eq backend "convex")}},
+    'convex-nuxt'
+    {{/if}}
+  ],
   css: ['~/assets/css/main.css'],
   devServer: {
     port: 3001
   },
   ssr: false,
+  {{#if (eq backend "convex")}}
+  convex: {
+    url: process.env.NUXT_PUBLIC_CONVEX_URL,
+  },
+  {{/if}}
   runtimeConfig: {
     public: {
       serverURL: process.env.NUXT_PUBLIC_SERVER_URL,

package/templates/frontend/nuxt/package.json.hbs

@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@nuxt/ui": "3.3.0",
-    "@tanstack/vue-query": "^5.83.0",
     "nuxt": "^4.0.2",
     "typescript": "^5.8.3",
     "vue": "^3.5.18",
@@ -20,7 +19,6 @@
   },
   "devDependencies": {
     "tailwindcss": "^4.1.11",
-    "@tanstack/vue-query-devtools": "^5.83.0",
     "@iconify-json/lucide": "^1.2.57"
   }
 }

package/templates/examples/todo/web/nuxt/app/pages/todos.vue

@@ -1,108 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
-
-const { $orpc } = useNuxtApp()
-
-const newTodoText = ref('')
-const queryClient = useQueryClient()
-
-const todos = useQuery($orpc.todo.getAll.queryOptions())
-
-const createMutation = useMutation($orpc.todo.create.mutationOptions({
-  onSuccess: () => {
-    queryClient.invalidateQueries()
-    newTodoText.value = ''
-  }
-}))
-
-const toggleMutation = useMutation($orpc.todo.toggle.mutationOptions({
-  onSuccess: () => queryClient.invalidateQueries()
-}))
-
-const deleteMutation = useMutation($orpc.todo.delete.mutationOptions({
-  onSuccess: () => queryClient.invalidateQueries()
-}))
-
-function handleAddTodo() {
-  if (newTodoText.value.trim()) {
-    createMutation.mutate({ text: newTodoText.value })
-  }
-}
-
-function handleToggleTodo(id: number, completed: boolean) {
-  toggleMutation.mutate({ id, completed: !completed })
-}
-
-function handleDeleteTodo(id: number) {
-  deleteMutation.mutate({ id })
-}
-</script>
-
-<template>
-  <div class="mx-auto w-full max-w-md py-10">
-    <UCard>
-      <template #header>
-        <div>
-          <div class="text-xl font-bold">Todo List</div>
-          <div class="text-muted text-sm">Manage your tasks efficiently</div>
-        </div>
-      </template>
-      <form @submit.prevent="handleAddTodo" class="mb-6 flex items-center gap-2">
-        <UInput
-          v-model="newTodoText"
-          placeholder="Add a new task..."
-          autocomplete="off"
-          class="w-full"
-        />
-        <UButton
-          type="submit"
-          icon="i-lucide-plus"
-        >
-          Add
-        </UButton>
-      </form>
-
-      <div v-if="todos.status.value === 'pending'" class="flex justify-center py-4">
-        <UIcon name="i-lucide-loader-2" class="animate-spin w-6 h-6" />
-      </div>
-      <p v-else-if="todos.status.value === 'error'" class="py-4 text-center text-red-500">
-        Error: {{ todos.error.value?.message || 'Failed to load todos' }}
-      </p>
-      <p v-else-if="todos.data.value?.length === 0" class="py-4 text-center">
-        No todos yet. Add one above!
-      </p>
-      <ul v-else class="space-y-2">
-        <li
-          v-for="todo in todos.data.value"
-          :key="todo.id"
-          class="flex items-center justify-between rounded-md border p-2"
-        >
-          <div class="flex items-center gap-2">
-            <UCheckbox
-              :model-value="todo.completed"
-              @update:model-value="() => handleToggleTodo(todo.id, todo.completed)"
-              :id="`todo-${todo.id}`"
-            />
-            <label
-              :for="`todo-${todo.id}`"
-              :class="{ 'line-through text-muted': todo.completed }"
-              class="cursor-pointer"
-            >
-              {{ todo.text }}
-            </label>
-          </div>
-          <UButton
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            square
-            @click="handleDeleteTodo(todo.id)"
-            aria-label="Delete todo"
-            icon="i-lucide-trash-2"
-          />
-        </li>
-      </ul>
-    </UCard>
-  </div>
-</template>