create-better-t-stack 3.12.5 → 3.12.7

package/templates/auth/better-auth/web/nuxt/app/components/SignInForm.vue.hbs

@@ -1,13 +1,31 @@
 <script setup lang="ts">
-import z from 'zod'
-const {$authClient} = useNuxtApp()
-import type { FormSubmitEvent } from '#ui/types'
+import * as z from 'zod'
+import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'
+
+const { $authClient } = useNuxtApp()
 
 const emit = defineEmits(['switchToSignUp'])
 
 const toast = useToast()
 const loading = ref(false)
 
+const fields: AuthFormField[] = [
+  {
+    name: 'email',
+    type: 'email',
+    label: 'Email',
+    placeholder: 'Enter your email',
+    required: true
+  },
+  {
+    name: 'password',
+    type: 'password',
+    label: 'Password',
+    placeholder: 'Enter your password',
+    required: true
+  }
+]
+
 const schema = z.object({
   email: z.email('Invalid email address'),
   password: z.string().min(8, 'Password must be at least 8 characters'),
@@ -15,12 +33,7 @@ const schema = z.object({
 
 type Schema = z.output<typeof schema>
 
-const state = reactive({
-  email: '',
-  password: '',
-})
-
-async function onSubmit (event: FormSubmitEvent<Schema>) {
+async function onSubmit(event: FormSubmitEvent<Schema>) {
   loading.value = true
   try {
     await $authClient.signIn.email(
@@ -39,7 +52,7 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
       },
     )
   } catch (error: any) {
-     toast.add({ title: 'An unexpected error occurred', description: error.message || 'Please try again.' })
+    toast.add({ title: 'An unexpected error occurred', description: error.message || 'Please try again.' })
   } finally {
     loading.value = false
   }
@@ -47,31 +60,23 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <div class="mx-auto w-full mt-10 max-w-md p-6">
-    <h1 class="mb-6 text-center text-3xl font-bold">Welcome Back</h1>
-
-    <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
-      <UFormField label="Email" name="email">
-        <UInput v-model="state.email" type="email" class="w-full" />
-      </UFormField>
-
-      <UFormField label="Password" name="password">
-        <UInput v-model="state.password" type="password" class="w-full" />
-      </UFormField>
-
-      <UButton type="submit" block :loading="loading">
-        Sign In
-      </UButton>
-    </UForm>
-
-    <div class="mt-4 text-center">
-      <UButton
-        variant="link"
-        @click="$emit('switchToSignUp')"
-        class="text-primary hover:text-primary-dark"
+  <div class="flex flex-col items-center justify-center gap-4 p-4">
+    <UPageCard class="w-full max-w-md">
+      <UAuthForm
+        :schema="schema"
+        :fields="fields"
+        title="Welcome Back"
+        icon="i-lucide-log-in"
+        :submit="{ label: 'Sign In', loading }"
+        @submit="onSubmit"
       >
-        Need an account? Sign Up
-      </UButton>
-    </div>
+        <template #description>
+          Need an account?
+          <ULink class="text-primary font-medium" @click="$emit('switchToSignUp')">
+            Sign Up
+          </ULink>
+        </template>
+      </UAuthForm>
+    </UPageCard>
   </div>
 </template>

package/templates/auth/better-auth/web/nuxt/app/components/SignUpForm.vue.hbs

@@ -1,13 +1,38 @@
 <script setup lang="ts">
-import z from 'zod'
-import type { FormSubmitEvent } from '#ui/types'
-const {$authClient} = useNuxtApp()
+import * as z from 'zod'
+import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'
+
+const { $authClient } = useNuxtApp()
 
 const emit = defineEmits(['switchToSignIn'])
 
 const toast = useToast()
 const loading = ref(false)
 
+const fields: AuthFormField[] = [
+  {
+    name: 'name',
+    type: 'text',
+    label: 'Name',
+    placeholder: 'Enter your name',
+    required: true
+  },
+  {
+    name: 'email',
+    type: 'email',
+    label: 'Email',
+    placeholder: 'Enter your email',
+    required: true
+  },
+  {
+    name: 'password',
+    type: 'password',
+    label: 'Password',
+    placeholder: 'Enter your password',
+    required: true
+  }
+]
+
 const schema = z.object({
   name: z.string().min(2, 'Name must be at least 2 characters'),
   email: z.email('Invalid email address'),
@@ -16,13 +41,7 @@ const schema = z.object({
 
 type Schema = z.output<typeof schema>
 
-const state = reactive({
-  name: '',
-  email: '',
-  password: '',
-})
-
-async function onSubmit (event: FormSubmitEvent<Schema>) {
+async function onSubmit(event: FormSubmitEvent<Schema>) {
   loading.value = true
   try {
     await $authClient.signUp.email(
@@ -42,7 +61,7 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
       },
     )
   } catch (error: any) {
-     toast.add({ title: 'An unexpected error occurred', description: error.message || 'Please try again.' })
+    toast.add({ title: 'An unexpected error occurred', description: error.message || 'Please try again.' })
   } finally {
     loading.value = false
   }
@@ -50,35 +69,23 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <div class="mx-auto w-full mt-10 max-w-md p-6">
-    <h1 class="mb-6 text-center text-3xl font-bold">Create Account</h1>
-
-    <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
-       <UFormField label="Name" name="name">
-        <UInput v-model="state.name" class="w-full" />
-      </UFormField>
-
-      <UFormField label="Email" name="email">
-        <UInput v-model="state.email" type="email" class="w-full" />
-      </UFormField>
-
-      <UFormField label="Password" name="password">
-        <UInput v-model="state.password" type="password" class="w-full" />
-      </UFormField>
-
-      <UButton type="submit" block :loading="loading">
-        Sign Up
-      </UButton>
-    </UForm>
-
-    <div class="mt-4 text-center">
-      <UButton
-        variant="link"
-        @click="$emit('switchToSignIn')"
-        class="text-primary hover:text-primary-dark"
+  <div class="flex flex-col items-center justify-center gap-4 p-4">
+    <UPageCard class="w-full max-w-md">
+      <UAuthForm
+        :schema="schema"
+        :fields="fields"
+        title="Create Account"
+        icon="i-lucide-user-plus"
+        :submit="{ label: 'Sign Up', loading }"
+        @submit="onSubmit"
       >
-        Already have an account? Sign In
-      </UButton>
-    </div>
+        <template #description>
+          Already have an account?
+          <ULink class="text-primary font-medium" @click="$emit('switchToSignIn')">
+            Sign In
+          </ULink>
+        </template>
+      </UAuthForm>
+    </UPageCard>
   </div>
 </template>

package/templates/auth/better-auth/web/nuxt/app/middleware/auth.ts.hbs

@@ -1,12 +1,14 @@
 export default defineNuxtRouteMiddleware(async (to, from) => {
-  if (import.meta.server) return
+  if (import.meta.server) return;
 
-  const { $authClient } = useNuxtApp()
-  const session = $authClient.useSession()
+  const { $authClient } = useNuxtApp();
+  const session = $authClient.useSession();
 
-  if (session.value.isPending || !session.value) {
-    if (to.path === "/dashboard") {
-      return navigateTo("/login");
-    }
+  if (session.value.isPending) {
+    return;
+  }
+
+  if (!session.value.data) {
+    return navigateTo("/login");
   }
 });

package/templates/auth/better-auth/web/nuxt/app/pages/dashboard.vue.hbs

@@ -2,15 +2,15 @@
 {{#if (eq api "orpc")}}
 import { useQuery } from '@tanstack/vue-query'
 {{/if}}
-const {$authClient} = useNuxtApp()
+
+const { $authClient, $orpc } = useNuxtApp()
 
 definePageMeta({
   middleware: ['auth']
 })
 
-const { $orpc } = useNuxtApp()
-
 const session = $authClient.useSession()
+
 {{#if (eq payments "polar")}}
 const customerState = ref<any>(null)
 {{/if}}
@@ -34,34 +34,66 @@ const hasProSubscription = computed(() =>
   customerState.value?.activeSubscriptions?.length! > 0
 )
 {{/if}}
-
 </script>
 
 <template>
-  <div class="container mx-auto p-4">
-    <h1 class="text-2xl font-bold mb-4">Dashboard</h1>
-    <div v-if="session?.data?.user">
-        <p class="mb-2">Welcome \{{ session.data.user.name }}</p>
+  <UContainer class="py-8">
+    <UPageHeader
+      title="Dashboard"
+      :description="session?.data?.user ? `Welcome back, ${session.data.user.name}!` : 'Loading...'"
+    />
+
+    <div class="mt-6 space-y-4">
+      {{#if (eq api "orpc")}}
+      <UCard>
+        <template #header>
+          <div class="font-medium">Private Data</div>
+        </template>
+
+        <USkeleton v-if="privateData.status.value === 'pending'" class="h-6 w-48" />
+
+        <UAlert
+          v-else-if="privateData.status.value === 'error'"
+          color="error"
+          icon="i-lucide-alert-circle"
+          title="Error loading data"
+          :description="privateData.error.value?.message || 'Failed to load private data'"
+        />
+
+        <div v-else-if="privateData.data.value" class="flex items-center gap-2">
+          <UIcon name="i-lucide-check-circle" class="text-success" />
+          <span>\{{ privateData.data.value.message }}</span>
+        </div>
+      </UCard>
+      {{/if}}
+
+      {{#if (eq payments "polar")}}
+      <UCard>
+        <template #header>
+          <div class="font-medium">Subscription</div>
+        </template>
+
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <UIcon :name="hasProSubscription ? 'i-lucide-crown' : 'i-lucide-user'" :class="hasProSubscription ? 'text-warning' : 'text-muted'" />
+            <span>Plan: \{{ hasProSubscription ? "Pro" : "Free" }}</span>
+          </div>
+          <UButton 
+            v-if="hasProSubscription"
+            variant="outline"
+            @click="() => { $authClient.customer.portal() }"
+          >
+            Manage Subscription
+          </UButton>
+          <UButton 
+            v-else
+            @click="() => { $authClient.checkout({ slug: 'pro' }) }"
+          >
+            Upgrade to Pro
+          </UButton>
+        </div>
+      </UCard>
+      {{/if}}
     </div>
-    {{#if (eq api "orpc")}}
-    <div v-if="privateData.status.value === 'pending'">Loading private data...</div>
-    <div v-else-if="privateData.status.value === 'error'">Error loading private data: \{{ privateData.error.value?.message }}</div>
-    <p v-else-if="privateData.data.value">API: \{{ privateData.data.value.message }}</p>
-    {{/if}}
-    {{#if (eq payments "polar")}}
-    <p class="mb-2">Plan: \{{ hasProSubscription ? "Pro" : "Free" }}</p>
-    <UButton 
-      v-if="hasProSubscription"
-      @click="() => { $authClient.customer.portal() }"
-    >
-      Manage Subscription
-    </UButton>
-    <UButton 
-      v-else
-      @click="() => { $authClient.checkout({ slug: 'pro' }) }"
-    >
-      Upgrade to Pro
-    </UButton>
-    {{/if}}
-  </div>
+  </UContainer>
 </template>

package/templates/auth/better-auth/web/nuxt/app/pages/login.vue.hbs

@@ -14,11 +14,14 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div>
-    <Loader v-if="session.isPending" />
+  <UContainer class="py-8">
+    <div v-if="session.isPending" class="flex flex-col items-center justify-center gap-4 py-12">
+      <UIcon name="i-lucide-loader-2" class="animate-spin text-4xl text-primary" />
+      <span class="text-muted">Loading...</span>
+    </div>
     <div v-else-if="!session.data">
       <SignInForm v-if="showSignIn" @switch-to-sign-up="showSignIn = false" />
       <SignUpForm v-else @switch-to-sign-in="showSignIn = true" />
     </div>
-  </div>
+  </UContainer>
 </template>

package/templates/backend/server/elysia/src/index.ts.hbs

@@ -6,7 +6,8 @@ import { Elysia } from "elysia";
 import { cors } from "@elysiajs/cors";
 {{#if (includes examples "ai")}}
 import { google } from "@ai-sdk/google";
-import { convertToModelMessages, streamText } from "ai";
+import { convertToModelMessages, streamText, wrapLanguageModel } from "ai";
+import { devToolsMiddleware } from "@ai-sdk/devtools";
 {{/if}}
 {{#if (eq api "trpc")}}
 import { createContext } from "@{{projectName}}/api/context";
@@ -103,9 +104,13 @@ const app = new Elysia()
 	.post("/ai", async (context) => {
 		const body = await context.request.json();
 		const uiMessages = body.messages || [];
-		const result = streamText({
+		const model = wrapLanguageModel({
 			model: google("gemini-2.5-flash"),
-			messages: convertToModelMessages(uiMessages)
+			middleware: devToolsMiddleware(),
+		});
+		const result = streamText({
+			model,
+			messages: await convertToModelMessages(uiMessages)
 		});
 
 		return result.toUIMessageStreamResponse();

package/templates/backend/server/express/src/index.ts.hbs

@@ -18,8 +18,9 @@ import { createContext } from "@{{projectName}}/api/context";
 import cors from "cors";
 import express from "express";
 {{#if (includes examples "ai")}}
-import { streamText, type UIMessage, convertToModelMessages } from "ai";
+import { streamText, type UIMessage, convertToModelMessages, wrapLanguageModel } from "ai";
 import { google } from "@ai-sdk/google";
+import { devToolsMiddleware } from "@ai-sdk/devtools";
 {{/if}}
 {{#if (eq auth "better-auth")}}
 import { auth } from "@{{projectName}}/auth";
@@ -104,9 +105,13 @@ app.use(express.json());
 {{#if (includes examples "ai")}}
 app.post("/ai", async (req, res) => {
 	const { messages = [] } = (req.body || {}) as { messages: UIMessage[] };
-	const result = streamText({
+	const model = wrapLanguageModel({
 		model: google("gemini-2.5-flash"),
-		messages: convertToModelMessages(messages),
+		middleware: devToolsMiddleware(),
+	});
+	const result = streamText({
+		model,
+		messages: await convertToModelMessages(messages),
 	});
 	result.pipeUIMessageStreamToResponse(res);
 });

package/templates/backend/server/fastify/src/index.ts.hbs

@@ -23,8 +23,9 @@ import { createContext } from "@{{projectName}}/api/context";
 {{/if}}
 
 {{#if (includes examples "ai")}}
-import { streamText, type UIMessage, convertToModelMessages } from "ai";
+import { streamText, type UIMessage, convertToModelMessages, wrapLanguageModel } from "ai";
 import { google } from "@ai-sdk/google";
+import { devToolsMiddleware } from "@ai-sdk/devtools";
 {{/if}}
 
 {{#if (eq auth "better-auth")}}
@@ -160,9 +161,13 @@ interface AiRequestBody {
 
 fastify.post('/ai', async function (request) {
 	const { messages } = request.body as AiRequestBody;
-	const result = streamText({
+	const model = wrapLanguageModel({
 		model: google('gemini-2.5-flash'),
-		messages: convertToModelMessages(messages),
+		middleware: devToolsMiddleware(),
+	});
+	const result = streamText({
+		model,
+		messages: await convertToModelMessages(messages),
 	});
 
 	return result.toUIMessageStreamResponse();

package/templates/backend/server/hono/src/index.ts.hbs

@@ -20,12 +20,14 @@ import { Hono } from "hono";
 import { cors } from "hono/cors";
 import { logger } from "hono/logger";
 {{#if (and (includes examples "ai") (or (eq runtime "bun") (eq runtime "node")))}}
-import { streamText, convertToModelMessages } from "ai";
+import { streamText, convertToModelMessages, wrapLanguageModel } from "ai";
 import { google } from "@ai-sdk/google";
+import { devToolsMiddleware } from "@ai-sdk/devtools";
 {{/if}}
 {{#if (and (includes examples "ai") (eq runtime "workers"))}}
-import { streamText, convertToModelMessages } from "ai";
+import { streamText, convertToModelMessages, wrapLanguageModel } from "ai";
 import { createGoogleGenerativeAI } from "@ai-sdk/google";
+import { devToolsMiddleware } from "@ai-sdk/devtools";
 {{/if}}
 
 const app = new Hono();
@@ -110,9 +112,13 @@ app.use(
 app.post("/ai", async (c) => {
 	const body = await c.req.json();
 	const uiMessages = body.messages || [];
-	const result = streamText({
+	const model = wrapLanguageModel({
 		model: google("gemini-2.5-flash"),
-		messages: convertToModelMessages(uiMessages),
+		middleware: devToolsMiddleware(),
+	});
+	const result = streamText({
+		model,
+		messages: await convertToModelMessages(uiMessages),
 	});
 
 	return result.toUIMessageStreamResponse();
@@ -126,9 +132,13 @@ app.post("/ai", async (c) => {
 	const google = createGoogleGenerativeAI({
 		apiKey: env.GOOGLE_GENERATIVE_AI_API_KEY,
 	});
-	const result = streamText({
+	const model = wrapLanguageModel({
 		model: google("gemini-2.5-flash"),
-		messages: convertToModelMessages(uiMessages),
+		middleware: devToolsMiddleware(),
+	});
+	const result = streamText({
+		model,
+		messages: await convertToModelMessages(uiMessages),
 	});
 
 	return result.toUIMessageStreamResponse();

package/templates/examples/ai/fullstack/next/src/app/api/ai/route.ts.hbs

@@ -1,14 +1,19 @@
 import { google } from "@ai-sdk/google";
-import { streamText, type UIMessage, convertToModelMessages } from "ai";
+import { streamText, type UIMessage, convertToModelMessages, wrapLanguageModel } from "ai";
+import { devToolsMiddleware } from "@ai-sdk/devtools";
 
 export const maxDuration = 30;
 
 export async function POST(req: Request) {
 	const { messages }: { messages: UIMessage[] } = await req.json();
 
-	const result = streamText({
+	const model = wrapLanguageModel({
 		model: google("gemini-2.5-flash"),
-		messages: convertToModelMessages(messages),
+		middleware: devToolsMiddleware(),
+	});
+	const result = streamText({
+		model,
+		messages: await convertToModelMessages(messages),
 	});
 
 	return result.toUIMessageStreamResponse();

package/templates/examples/ai/fullstack/tanstack-start/src/routes/api/ai/$.ts.hbs

@@ -1,6 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { google } from "@ai-sdk/google";
-import { streamText, type UIMessage, convertToModelMessages } from "ai";
+import { streamText, type UIMessage, convertToModelMessages, wrapLanguageModel } from "ai";
+import { devToolsMiddleware } from "@ai-sdk/devtools";
 
 export const Route = createFileRoute("/api/ai/$")({
   server: {
@@ -9,9 +10,13 @@ export const Route = createFileRoute("/api/ai/$")({
         try {
           const { messages }: { messages: UIMessage[] } = await request.json();
 
-          const result = streamText({
+          const model = wrapLanguageModel({
             model: google("gemini-2.5-flash"),
-            messages: convertToModelMessages(messages),
+            middleware: devToolsMiddleware(),
+          });
+          const result = streamText({
+            model,
+            messages: await convertToModelMessages(messages),
           });
 
           return result.toUIMessageStreamResponse();

package/templates/examples/ai/native/bare/polyfills.js

@@ -1,22 +1,25 @@
-import structuredClone from "@ungap/structured-clone";
-import { Platform } from "react-native";
+import { Platform } from 'react-native';
+import structuredClone from '@ungap/structured-clone';
 
-if (Platform.OS !== "web") {
+if (Platform.OS !== 'web') {
   const setupPolyfills = async () => {
-    const { polyfillGlobal } = await import("react-native/Libraries/Utilities/PolyfillFunctions");
+    const { polyfillGlobal } = await import(
+      'react-native/Libraries/Utilities/PolyfillFunctions'
+    );
 
-    const { TextEncoderStream, TextDecoderStream } =
-      await import("@stardazed/streams-text-encoding");
+    const { TextEncoderStream, TextDecoderStream } = await import(
+      '@stardazed/streams-text-encoding'
+    );
 
-    if (!("structuredClone" in global)) {
-      polyfillGlobal("structuredClone", () => structuredClone);
+    if (!('structuredClone' in global)) {
+      polyfillGlobal('structuredClone', () => structuredClone);
     }
 
-    polyfillGlobal("TextEncoderStream", () => TextEncoderStream);
-    polyfillGlobal("TextDecoderStream", () => TextDecoderStream);
+    polyfillGlobal('TextEncoderStream', () => TextEncoderStream);
+    polyfillGlobal('TextDecoderStream', () => TextDecoderStream);
   };
 
   setupPolyfills();
 }
 
-export {};
+export {};