create-better-t-stack 2.47.8 → 2.48.0

package/dist/cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { createBtsCli } from "./src-D7YJOo26.js";
+import { createBtsCli } from "./src-BwIapwZk.js";
 
 //#region src/cli.ts
 createBtsCli().run();

package/dist/index.js

@@ -1,4 +1,4 @@
 #!/usr/bin/env node
-import { builder, createBtsCli, docs, init, router, sponsors } from "./src-D7YJOo26.js";
+import { builder, createBtsCli, docs, init, router, sponsors } from "./src-BwIapwZk.js";
 
 export { builder, createBtsCli, docs, init, router, sponsors };

package/dist/{src-D7YJOo26.js → src-BwIapwZk.js}

@@ -107,18 +107,18 @@ const dependencyVersionMap = {
 	fastify: "^5.3.3",
 	"@fastify/cors": "^11.0.1",
 	turbo: "^2.5.4",
-	ai: "^5.0.39",
+	ai: "^5.0.49",
 	"@ai-sdk/google": "^2.0.13",
-	"@ai-sdk/vue": "^2.0.39",
+	"@ai-sdk/vue": "^2.0.49",
 	"@ai-sdk/svelte": "^3.0.39",
 	"@ai-sdk/react": "^2.0.39",
 	streamdown: "^1.3.0",
 	shiki: "^3.12.2",
-	"@orpc/server": "^1.8.6",
-	"@orpc/client": "^1.8.6",
-	"@orpc/openapi": "^1.8.6",
-	"@orpc/zod": "^1.8.6",
-	"@orpc/tanstack-query": "^1.8.6",
+	"@orpc/server": "^1.9.0",
+	"@orpc/client": "^1.9.0",
+	"@orpc/openapi": "^1.9.0",
+	"@orpc/zod": "^1.9.0",
+	"@orpc/tanstack-query": "^1.9.0",
 	"@trpc/tanstack-react-query": "^11.5.0",
 	"@trpc/server": "^11.5.0",
 	"@trpc/client": "^11.5.0",
@@ -130,8 +130,8 @@ const dependencyVersionMap = {
 	"@convex-dev/better-auth": "^0.8.4",
 	"@tanstack/svelte-query": "^5.85.3",
 	"@tanstack/svelte-query-devtools": "^5.85.3",
-	"@tanstack/vue-query-devtools": "^5.83.0",
-	"@tanstack/vue-query": "^5.83.0",
+	"@tanstack/vue-query-devtools": "^5.90.2",
+	"@tanstack/vue-query": "^5.90.2",
 	"@tanstack/react-query-devtools": "^5.85.5",
 	"@tanstack/react-query": "^5.85.5",
 	"@tanstack/solid-query": "^5.87.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-better-t-stack",
-  "version": "2.47.8",
+  "version": "2.48.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/examples/ai/web/nuxt/app/pages/ai.vue.hbs

@@ -1,78 +1,56 @@
 <script setup lang="ts">
 import { Chat } from '@ai-sdk/vue'
+import type { UIMessage } from 'ai'
+import { getTextFromMessage } from '@nuxt/ui/utils/ai'
 import { DefaultChatTransport } from 'ai'
-import { nextTick, ref, watch } from 'vue'
+import { ref } from 'vue'
 
 const config = useRuntimeConfig()
 const serverUrl = config.public.serverURL
 
+const messages: UIMessage[] = []
 const input = ref('')
+
 const chat = new Chat({
+  messages,
   transport: new DefaultChatTransport({
     api: `${serverUrl}/ai`,
   }),
-})
-
-const messagesEndRef = ref<null | HTMLDivElement>(null)
-
-watch(
-  () => chat.messages,
-  async () => {
-    await nextTick()
-    messagesEndRef.value?.scrollIntoView({ behavior: 'smooth' })
+  onError(error) {
+    console.error('Chat error:', error)
   }
-)
+})
 
-const handleSubmit = (e: Event) => {
+async function handleSubmit(e: Event) {
   e.preventDefault()
-  const text = input.value.trim()
-  if (!text) return
-  chat.sendMessage({ text })
+  const userInput = input.value
   input.value = ''
-}
-
-function getMessageText(message: any) {
-  return message.parts
-    .filter((part: any) => part.type === 'text')
-    .map((part: any) => part.text)
-    .join('')
+  
+  if (!userInput.trim()) return
+  
+  chat.sendMessage({ text: userInput })
 }
 </script>
 
 <template>
-  <div class="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
-    <div class="overflow-y-auto space-y-4 pb-4">
-      <div v-if="chat.messages.length === 0" class="text-center text-muted-foreground mt-8">
-        Ask me anything to get started!
-      </div>
-      <div
-        v-for="message in chat.messages"
-        :key="message.id"
-        :class="[
-          'p-3 rounded-lg',
-          message.role === 'user' ? 'bg-primary/10 ml-8' : 'bg-secondary/20 mr-8'
-        ]"
-      >
-        <p class="text-sm font-semibold mb-1">
-          \{{ message.role === 'user' ? 'You' : 'AI Assistant' }}
-        </p>
-        <div class="whitespace-pre-wrap">\{{ getMessageText(message) }}</div>
-      </div>
-      <div ref="messagesEndRef"></div>
-    </div>
-
-    <form @submit="handleSubmit" class="w-full flex items-center space-x-2 pt-2 border-t">
-      <UInput
-        name="prompt"
-        v-model="input"
-        placeholder="Type your message..."
-        class="flex-1"
-        autocomplete="off"
-        autofocus
+  <div class="grid grid-rows-[1fr_auto] w-full h-full mx-auto p-4">
+    <UChatMessages :messages="chat.messages" :status="chat.status">
+      <template #content="{ message }">
+        <div class="whitespace-pre-wrap">\{{ getTextFromMessage(message) }}</div>
+      </template>
+    </UChatMessages>
+    <UChatPrompt 
+      v-model="input" 
+      :error="chat.error" 
+      @submit="handleSubmit" 
+      placeholder="Type your message..."
+      class="w-full"
+    >
+      <UChatPromptSubmit 
+        :status="chat.status" 
+        @stop="chat.stop" 
+        @reload="chat.regenerate" 
       />
-      <UButton type="submit" color="primary" size="md" square>
-        <UIcon name="i-lucide-send" class="w-5 h-5" />
-      </UButton>
-    </form>
+    </UChatPrompt>
   </div>
 </template>

package/templates/frontend/nuxt/app/layouts/default.vue.hbs

@@ -2,7 +2,7 @@
 </script>
 
 <template>
-    <div class="grid grid-rows-[auto_1fr] h-full">
+    <div class="grid grid-rows-[auto_1fr] h-svh">
         <Header />
         <main class="overflow-y-auto">
             <slot />

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

@@ -54,17 +54,6 @@ const healthCheck = useConvexQuery(api.healthCheck.get, {});
           {{else}}
             {{#unless (eq api "none")}}
             <div class="flex items-center gap-2">
-              <div
-                class="w-2 h-2 rounded-full"
-                :class="{
-                  'bg-yellow-500 animate-pulse': healthCheck.status.value === 'pending',
-                  'bg-green-500': healthCheck.status.value === 'success',
-                  'bg-red-500': healthCheck.status.value === 'error',
-                  'bg-gray-400': healthCheck.status.value !== 'pending' &&
-                                  healthCheck.status.value !== 'success' &&
-                                  healthCheck.status.value !== 'error'
-                }"
-              ></div>
               <span class="text-sm text-muted-foreground">
                 <template v-if="healthCheck.status.value === 'pending'">
                   Checking...

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

@@ -10,15 +10,17 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@nuxt/ui": "3.3.3",
-    "nuxt": "^4.1.1",
+    "@nuxt/ui": "^4.0.0",
+    "@nuxt/content": "^3.7.1",
+    "@nuxtjs/mdc": "^0.17.4",
+    "nuxt": "^4.1.2",
     "typescript": "^5.9.2",
     "vue": "^3.5.21",
     "vue-router": "^4.5.1",
     "zod": "^4.1.5"
   },
   "devDependencies": {
-    "tailwindcss": "^4.1.11",
+    "tailwindcss": "^4.1.13",
     "@iconify-json/lucide": "^1.2.57"
   }
 }