feat: use @nuxthub/core (#69)

Co-authored-by: Sébastien Chopin <[email protected]>
Co-authored-by: Benjamin Canac <[email protected]>
Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com>

Author: 4 people

README.md

@@ -20,7 +20,7 @@ Full-featured AI Chatbot Nuxt application with authentication, chat history, mul
 - ⚡️ **Streaming AI messages** powered by the [AI SDK v5](https://sdk.vercel.ai)
 - 🤖 **Multiple model support** via various AI providers with built-in AI Gateway support
 - 🔐 **Authentication** via [nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils)
-- 💾 **Chat history persistence** using PostgreSQL database and [Drizzle ORM](https://orm.drizzle.team)
+- 💾 **Chat history persistence** using SQLite database (Turso in production) and [Drizzle ORM](https://orm.drizzle.team)
 - 🚀 **Easy deploy** to Vercel with zero configuration
 
 ## Quick Start
@@ -31,7 +31,7 @@ npm create nuxt@latest -- -t ui/chat
 
 ## Deploy your own
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-name=chat&repository-url=https%3A%2F%2Fgithub.com%2Fnuxt-ui-templates%2Fchat&env=NUXT_SESSION_PASSWORD,NUXT_OAUTH_GITHUB_CLIENT_ID,NUXT_OAUTH_GITHUB_CLIENT_SECRET&products=%5B%7B%22type%22%3A%22integration%22%2C%22group%22%3A%22postgres%22%7D%5D&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fnuxt%2Fchat-dark.png&demo-url=https%3A%2F%2Fchat-template.nuxt.dev%2F&demo-title=Nuxt%20Chat%20Template&demo-description=An%20AI%20chatbot%20template%20to%20build%20your%20own%20chatbot%20powered%20by%20Nuxt%20MDC%20and%20Vercel%20AI%20SDK.)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-name=chat&repository-url=https%3A%2F%2Fgithub.com%2Fnuxt-ui-templates%2Fchat&env=NUXT_SESSION_PASSWORD,NUXT_OAUTH_GITHUB_CLIENT_ID,NUXT_OAUTH_GITHUB_CLIENT_SECRET&products=%5B%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22storage%22%2C%22productSlug%22%3A%22database%22%2C%22integrationSlug%22%3A%22tursocloud%22%7D%5D&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fnuxt%2Fchat-dark.png&demo-url=https%3A%2F%2Fchat-template.nuxt.dev%2F&demo-title=Nuxt%20Chat%20Template&demo-description=An%20AI%20chatbot%20template%20to%20build%20your%20own%20chatbot%20powered%20by%20Nuxt%20MDC%20and%20Vercel%20AI%20SDK.)
 
 ## Setup
 
@@ -102,10 +102,8 @@ Or connect your repository to Vercel for automatic deployments:
 1. Push your code to GitHub
 2. Connect your repository to [Vercel](https://vercel.com)
 3. Configure your environment variables in the Vercel dashboard
-4. Deploy automatically on every push
-
-> [!NOTE]
-> Make sure to configure your PostgreSQL database connection and run migrations in your production environment.
+4. Create a Turso database and connect it to your Vercel project
+5. Deploy automatically on every push
 
 The application is configured to use [Vercel AI Gateway](https://vercel.com/docs/ai-gateway) which provides:
 

app/composables/useChats.ts

@@ -1,20 +1,20 @@
 import { isToday, isYesterday, subMonths } from 'date-fns'
 
-interface Chat {
+export interface UIChat {
   id: string
   label: string
   icon: string
   createdAt: string
 }
 
-export function useChats(chats: Ref<Chat[] | undefined>) {
+export function useChats(chats: Ref<UIChat[] | undefined>) {
   const groups = computed(() => {
     // Group chats by date
-    const today: Chat[] = []
-    const yesterday: Chat[] = []
-    const lastWeek: Chat[] = []
-    const lastMonth: Chat[] = []
-    const older: Record<string, Chat[]> = {}
+    const today: UIChat[] = []
+    const yesterday: UIChat[] = []
+    const lastWeek: UIChat[] = []
+    const lastMonth: UIChat[] = []
+    const older: Record<string, UIChat[]> = {}
 
     const oneWeekAgo = subMonths(new Date(), 0.25) // ~7 days ago
     const oneMonthAgo = subMonths(new Date(), 1)
@@ -56,7 +56,7 @@ export function useChats(chats: Ref<Chat[] | undefined>) {
     const formattedGroups = [] as Array<{
       id: string
       label: string
-      items: Array<Chat>
+      items: Array<UIChat>
     }>
 
     // Add groups that have chats

app/pages/chat/[id].vue

@@ -19,9 +19,8 @@ const { model } = useModels()
 const { data } = await useFetch(`/api/chats/${route.params.id}`, {
   cache: 'force-cache'
 })
-
 if (!data.value) {
-  throw createError({ statusCode: 404, statusMessage: 'Chat not found', fatal: true })
+  throw createError({ statusCode: 404, statusMessage: 'Chat not found' })
 }
 
 const input = ref('')

drizzle.config.ts

@@ -4,6 +4,7 @@ export default defineNuxtConfig({
     '@nuxt/eslint',
     '@nuxt/ui',
     '@nuxtjs/mdc',
+    '@nuxthub/core',
     'nuxt-auth-utils',
     'nuxt-charts'
   ],
@@ -36,6 +37,10 @@ export default defineNuxtConfig({
     }
   },
 
+  hub: {
+    db: 'sqlite'
+  },
+
   eslint: {
     config: {
       stylistic: {

nuxt.config.ts

@@ -9,16 +9,18 @@
     "postinstall": "nuxt prepare",
     "lint": "eslint .",
     "typecheck": "nuxt typecheck",
-    "db:generate": "drizzle-kit generate",
-    "db:migrate": "drizzle-kit migrate"
+    "db:generate": "nuxt db generate",
+    "db:migrate": "nuxt db migrate"
   },
   "dependencies": {
     "@ai-sdk/gateway": "^2.0.15",
     "@ai-sdk/vue": "^2.0.101",
     "@iconify-json/logos": "^1.2.10",
     "@iconify-json/lucide": "^1.2.74",
     "@iconify-json/simple-icons": "^1.2.59",
+    "@libsql/client": "^0.15.15",
     "@nuxt/ui": "^4.2.1",
+    "@nuxthub/core": "^0.10.0",
     "@nuxtjs/mdc": "^0.18.4",
     "ai": "^5.0.101",
     "date-fns": "^4.1.0",
@@ -32,7 +34,7 @@
   "devDependencies": {
     "@nuxt/eslint": "^1.10.0",
     "@types/node": "^24.10.1",
-    "drizzle-kit": "^0.31.7",
+    "drizzle-kit": "^0.31.8",
     "eslint": "^9.39.1",
     "typescript": "^5.9.3",
     "vue-tsc": "^3.1.5"