Skip to content

Commit 4ccf211

Browse files
AmanVarshney01AmanVarshney01
committed
feat(cli): upgrade to nuxt ui v4
1 parent 220250c commit 4ccf211

File tree

5 files changed

+48
-79
lines changed

5 files changed

+48
-79
lines changed

‎apps/cli/src/constants.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -108,19 +108,19 @@ export const dependencyVersionMap = {
108108

109109
turbo: "^2.5.4",
110110

111-
ai: "^5.0.39",
111+
ai: "^5.0.49",
112112
"@ai-sdk/google": "^2.0.13",
113-
"@ai-sdk/vue": "^2.0.39",
113+
"@ai-sdk/vue": "^2.0.49",
114114
"@ai-sdk/svelte": "^3.0.39",
115115
"@ai-sdk/react": "^2.0.39",
116116
streamdown: "^1.3.0",
117117
shiki: "^3.12.2",
118118

119-
"@orpc/server": "^1.8.6",
120-
"@orpc/client": "^1.8.6",
121-
"@orpc/openapi": "^1.8.6",
122-
"@orpc/zod": "^1.8.6",
123-
"@orpc/tanstack-query": "^1.8.6",
119+
"@orpc/server": "^1.9.0",
120+
"@orpc/client": "^1.9.0",
121+
"@orpc/openapi": "^1.9.0",
122+
"@orpc/zod": "^1.9.0",
123+
"@orpc/tanstack-query": "^1.9.0",
124124

125125
"@trpc/tanstack-react-query": "^11.5.0",
126126
"@trpc/server": "^11.5.0",
@@ -136,8 +136,8 @@ export const dependencyVersionMap = {
136136
"@tanstack/svelte-query": "^5.85.3",
137137
"@tanstack/svelte-query-devtools": "^5.85.3",
138138

139-
"@tanstack/vue-query-devtools": "^5.83.0",
140-
"@tanstack/vue-query": "^5.83.0",
139+
"@tanstack/vue-query-devtools": "^5.90.2",
140+
"@tanstack/vue-query": "^5.90.2",
141141

142142
"@tanstack/react-query-devtools": "^5.85.5",
143143
"@tanstack/react-query": "^5.85.5",

‎apps/cli/templates/examples/ai/web/nuxt/app/pages/ai.vue.hbs‎

Lines changed: 33 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,56 @@
11
<script setup lang="ts">
22
import { Chat } from '@ai-sdk/vue'
3+
import type { UIMessage } from 'ai'
4+
import { getTextFromMessage } from '@nuxt/ui/utils/ai'
35
import { DefaultChatTransport } from 'ai'
4-
import { nextTick, ref, watch } from 'vue'
6+
import { ref } from 'vue'
57
68
const config = useRuntimeConfig()
79
const serverUrl = config.public.serverURL
810
11+
const messages: UIMessage[] = []
912
const input = ref('')
13+
1014
const chat = new Chat({
15+
messages,
1116
transport: new DefaultChatTransport({
1217
api: `${serverUrl}/ai`,
1318
}),
14-
})
15-
16-
const messagesEndRef = ref<null | HTMLDivElement>(null)
17-
18-
watch(
19-
() => chat.messages,
20-
async () => {
21-
await nextTick()
22-
messagesEndRef.value?.scrollIntoView({ behavior: 'smooth' })
19+
onError(error) {
20+
console.error('Chat error:', error)
2321
}
24-
)
22+
})
2523
26-
const handleSubmit = (e: Event) => {
24+
async function handleSubmit(e: Event) {
2725
e.preventDefault()
28-
const text = input.value.trim()
29-
if (!text) return
30-
chat.sendMessage({ text })
26+
const userInput = input.value
3127
input.value = ''
32-
}
33-
34-
function getMessageText(message: any) {
35-
return message.parts
36-
.filter((part: any) => part.type === 'text')
37-
.map((part: any) => part.text)
38-
.join('')
28+
29+
if (!userInput.trim()) return
30+
31+
chat.sendMessage({ text: userInput })
3932
}
4033
</script>
4134

4235
<template>
43-
<div class="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
44-
<div class="overflow-y-auto space-y-4 pb-4">
45-
<div v-if="chat.messages.length === 0" class="text-center text-muted-foreground mt-8">
46-
Ask me anything to get started!
47-
</div>
48-
<div
49-
v-for="message in chat.messages"
50-
:key="message.id"
51-
:class="[
52-
'p-3 rounded-lg',
53-
message.role === 'user' ? 'bg-primary/10 ml-8' : 'bg-secondary/20 mr-8'
54-
]"
55-
>
56-
<p class="text-sm font-semibold mb-1">
57-
\{{ message.role === 'user' ? 'You' : 'AI Assistant' }}
58-
</p>
59-
<div class="whitespace-pre-wrap">\{{ getMessageText(message) }}</div>
60-
</div>
61-
<div ref="messagesEndRef"></div>
62-
</div>
63-
64-
<form @submit="handleSubmit" class="w-full flex items-center space-x-2 pt-2 border-t">
65-
<UInput
66-
name="prompt"
67-
v-model="input"
68-
placeholder="Type your message..."
69-
class="flex-1"
70-
autocomplete="off"
71-
autofocus
36+
<div class="grid grid-rows-[1fr_auto] w-full h-full mx-auto p-4">
37+
<UChatMessages :messages="chat.messages" :status="chat.status">
38+
<template #content="{ message }">
39+
<div class="whitespace-pre-wrap">\{{ getTextFromMessage(message) }}</div>
40+
</template>
41+
</UChatMessages>
42+
<UChatPrompt
43+
v-model="input"
44+
:error="chat.error"
45+
@submit="handleSubmit"
46+
placeholder="Type your message..."
47+
class="w-full"
48+
>
49+
<UChatPromptSubmit
50+
:status="chat.status"
51+
@stop="chat.stop"
52+
@reload="chat.regenerate"
7253
/>
73-
<UButton type="submit" color="primary" size="md" square>
74-
<UIcon name="i-lucide-send" class="w-5 h-5" />
75-
</UButton>
76-
</form>
54+
</UChatPrompt>
7755
</div>
7856
</template>

‎apps/cli/templates/frontend/nuxt/app/layouts/default.vue.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
</script>
33

44
<template>
5-
<div class="grid grid-rows-[auto_1fr] h-full">
5+
<div class="grid grid-rows-[auto_1fr] h-svh">
66
<Header />
77
<main class="overflow-y-auto">
88
<slot />

‎apps/cli/templates/frontend/nuxt/app/pages/index.vue.hbs‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -54,17 +54,6 @@ const healthCheck = useConvexQuery(api.healthCheck.get, {});
5454
{{else}}
5555
{{#unless (eq api "none")}}
5656
<div class="flex items-center gap-2">
57-
<div
58-
class="w-2 h-2 rounded-full"
59-
:class="{
60-
'bg-yellow-500 animate-pulse': healthCheck.status.value === 'pending',
61-
'bg-green-500': healthCheck.status.value === 'success',
62-
'bg-red-500': healthCheck.status.value === 'error',
63-
'bg-gray-400': healthCheck.status.value !== 'pending' &&
64-
healthCheck.status.value !== 'success' &&
65-
healthCheck.status.value !== 'error'
66-
}"
67-
></div>
6857
<span class="text-sm text-muted-foreground">
6958
<template v-if="healthCheck.status.value === 'pending'">
7059
Checking...

‎apps/cli/templates/frontend/nuxt/package.json.hbs‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,17 @@
1010
"postinstall": "nuxt prepare"
1111
},
1212
"dependencies": {
13-
"@nuxt/ui": "3.3.3",
14-
"nuxt": "^4.1.1",
13+
"@nuxt/ui": "^4.0.0",
14+
"@nuxt/content": "^3.7.1",
15+
"@nuxtjs/mdc": "^0.17.4",
16+
"nuxt": "^4.1.2",
1517
"typescript": "^5.9.2",
1618
"vue": "^3.5.21",
1719
"vue-router": "^4.5.1",
1820
"zod": "^4.1.5"
1921
},
2022
"devDependencies": {
21-
"tailwindcss": "^4.1.11",
23+
"tailwindcss": "^4.1.13",
2224
"@iconify-json/lucide": "^1.2.57"
2325
}
2426
}

0 commit comments

Comments
 (0)