Skip to content

Commit 59bff27

Browse files
productdevbookproductdevbook
committed
feat: nuxt 5
1 parent a3ac1df commit 59bff27

22 files changed

+615
-868
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,5 @@ native/target/
1818
# napi-rs generated
1919
native/*.node
2020
native/index.js
21-
native/index.d.ts
21+
native/index.d.ts
22+
.nuxt

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,7 @@
199199
"graphql": "catalog:",
200200
"graphql-yoga": "catalog:",
201201
"nitro": "catalog:",
202+
"nuxt": "catalog:",
202203
"tsdown": "catalog:",
203204
"typescript": "catalog:",
204205
"vite": "catalog:",

‎playgrounds/nuxt/nuxt.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import graphql from 'nitro-graphql'
44
export default defineNuxtConfig({
55
compatibilityDate: '2025-07-15',
66
devtools: { enabled: false },
7-
87
nitro: {
8+
builder: 'rolldown',
99
modules: [
1010
graphql({
1111
framework: 'graphql-yoga',

‎playgrounds/nuxt/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"postinstall": "nuxt prepare"
1111
},
1212
"dependencies": {
13+
"graphql-yoga": "catalog:",
1314
"nitro-graphql": "link:../..",
1415
"nuxt": "catalog:",
1516
"vue": "catalog:",

‎playgrounds/nuxt/server/graphql/hello.resolver.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { defineQuery } from 'nitro-graphql/define'
2+
3+
export const helloQueries = defineQuery({
4+
hello: () => 'Hello World!',
5+
greeting: (_: unknown, { name }: { name: string }) => `Hello ${name}!`,
6+
})

‎playgrounds/nuxt/server/graphql/schema.graphql‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
type Query {
2+
hello: String!
3+
greeting(name: String!): String!
4+
}

‎playgrounds/subscriptions/src/App.vue‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
2-
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
3-
import { createSubscriptionClient } from 'nitro-graphql/subscribe'
42
import type { SubscriptionHandle } from 'nitro-graphql/subscribe'
3+
import { createSubscriptionClient } from 'nitro-graphql/subscribe'
4+
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
55
66
// Types
77
interface Message {
@@ -18,19 +18,20 @@ interface Channel {
1818
}
1919
2020
// State
21-
const getOrCreateUsername = () => {
21+
function getOrCreateUsername() {
2222
if (typeof localStorage !== 'undefined') {
2323
const stored = localStorage.getItem('chat-username')
24-
if (stored) return stored
25-
const newUsername = 'User' + Math.floor(Math.random() * 1000)
24+
if (stored)
25+
return stored
26+
const newUsername = `User${Math.floor(Math.random() * 1000)}`
2627
localStorage.setItem('chat-username', newUsername)
2728
return newUsername
2829
}
29-
return 'User' + Math.floor(Math.random() * 1000)
30+
return `User${Math.floor(Math.random() * 1000)}`
3031
}
3132
const username = ref(getOrCreateUsername())
3233
33-
const saveUsername = () => {
34+
function saveUsername() {
3435
if (typeof localStorage !== 'undefined') {
3536
localStorage.setItem('chat-username', username.value)
3637
}
@@ -99,7 +100,7 @@ function subscribeToMessages() {
99100
console.error('Subscription error:', error)
100101
connectionState.value = 'disconnected'
101102
},
102-
{ transport: transport.value }
103+
{ transport: transport.value },
103104
)
104105
105106
if (subscriptionHandle) {
@@ -109,7 +110,8 @@ function subscribeToMessages() {
109110
110111
// Send message
111112
async function sendMessage() {
112-
if (!newMessage.value.trim()) return
113+
if (!newMessage.value.trim())
114+
return
113115
114116
await fetch('/api/graphql', {
115117
method: 'POST',
@@ -175,7 +177,9 @@ onUnmounted(() => {
175177
<div class="h-screen flex flex-col bg-[#1a1a2e]">
176178
<!-- Header -->
177179
<header class="flex justify-between items-center px-8 py-4 bg-[#16213e] border-b border-[#0f3460]">
178-
<h1 class="text-2xl font-bold text-[#e94560]">GraphQL Subscriptions</h1>
180+
<h1 class="text-2xl font-bold text-[#e94560]">
181+
GraphQL Subscriptions
182+
</h1>
179183
<div class="flex items-center gap-6">
180184
<a
181185
href="#/demo"
@@ -189,9 +193,9 @@ onUnmounted(() => {
189193
:class="{
190194
'bg-green-400': connectionState === 'connected',
191195
'bg-yellow-400': connectionState === 'connecting',
192-
'bg-red-400': connectionState === 'disconnected'
196+
'bg-red-400': connectionState === 'disconnected',
193197
}"
194-
></span>
198+
/>
195199
{{ connectionState }} ({{ transport }})
196200
</div>
197201
</div>
@@ -200,7 +204,9 @@ onUnmounted(() => {
200204
<div class="flex flex-1 overflow-hidden">
201205
<!-- Sidebar -->
202206
<aside class="w-60 bg-[#16213e] p-4 border-r border-[#0f3460] overflow-y-auto">
203-
<h3 class="text-xs uppercase text-gray-500 mb-2">Channels</h3>
207+
<h3 class="text-xs uppercase text-gray-500 mb-2">
208+
Channels
209+
</h3>
204210
<ul class="space-y-1">
205211
<li
206212
v-for="channel in channels"
@@ -215,7 +221,9 @@ onUnmounted(() => {
215221
</li>
216222
</ul>
217223

218-
<h3 class="text-xs uppercase text-gray-500 mt-6 mb-2">Transport</h3>
224+
<h3 class="text-xs uppercase text-gray-500 mt-6 mb-2">
225+
Transport
226+
</h3>
219227
<div class="flex gap-2">
220228
<button
221229
class="flex-1 px-3 py-2 text-sm rounded border transition-colors"
@@ -237,12 +245,14 @@ onUnmounted(() => {
237245
</button>
238246
</div>
239247

240-
<h3 class="text-xs uppercase text-gray-500 mt-6 mb-2">Username</h3>
248+
<h3 class="text-xs uppercase text-gray-500 mt-6 mb-2">
249+
Username
250+
</h3>
241251
<input
242252
v-model="username"
243253
class="w-full px-3 py-2 bg-[#0f3460] border border-[#0f3460] text-white rounded focus:outline-none focus:border-[#e94560]"
244254
@blur="saveUsername"
245-
/>
255+
>
246256
</aside>
247257

248258
<!-- Chat -->
@@ -265,7 +275,9 @@ onUnmounted(() => {
265275
</strong>
266276
<span class="text-xs text-gray-600">{{ formatTime(msg.createdAt) }}</span>
267277
</div>
268-
<div class="text-gray-300">{{ msg.content }}</div>
278+
<div class="text-gray-300">
279+
{{ msg.content }}
280+
</div>
269281
</div>
270282

271283
<div v-if="messages.length === 0" class="text-center text-gray-600 py-8">
@@ -282,7 +294,7 @@ onUnmounted(() => {
282294
placeholder="Type a message..."
283295
class="flex-1 px-4 py-3 bg-[#0f3460] border border-[#0f3460] text-white rounded-lg focus:outline-none focus:border-[#e94560]"
284296
autofocus
285-
/>
297+
>
286298
<button
287299
type="submit"
288300
class="px-6 py-3 bg-[#e94560] text-white font-semibold rounded-lg hover:bg-[#d63850] transition-colors"

0 commit comments

Comments
 (0)