feat: ✨ playground code example

playground/app.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <!-- TODO: Add PartyKit server & message sending to the playground. -->
+    Nuxt module playground! Take a look in the plugins/ directory.
+  </div>
+</template>
+
+<script setup>
+</script>

playground/composables/auth.ts

@@ -0,0 +1,3 @@
+export function useAccessToken() {
+  return ref('someAccessToken')
+}

playground/nuxt.config.ts

@@ -0,0 +1,4 @@
+export default defineNuxtConfig({
+  modules: ['../src/module'],
+  devtools: { enabled: true },
+})

playground/package.json

@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "name": "partykit-nuxt-playground",
+  "type": "module",
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "generate": "nuxi generate"
+  },
+  "dependencies": {
+    "nuxt": "^3.12.2",
+    "valibot": "^0.33.3"
+  }
+}

playground/plugins/partykit.client.ts

@@ -0,0 +1,44 @@
+import type * as v from 'valibot'
+
+/*
+ * This example makes partykit available throughout the entirety of the Nuxt application.
+ * This is useful when designing complete realtime Nuxt application rather than adding some
+ * real-time to a single page. A simpler approach is just using the `usePartySocket`
+ * composable directly in the page you want realtime in.
+ */
+export default defineNuxtPlugin({
+  name: 'partykit',
+  parallel: true,
+  setup() {
+    const config = useRuntimeConfig()
+    const accessToken = useAccessToken()
+
+    const { hostname } = window.location
+
+    const partySocket = usePartySocket<string>({
+      host: `${hostname}${config.public.partyHost}`,
+      room: 'hello',
+      immediate: false,
+      autoReconnect: true,
+      query: {
+        token: accessToken,
+      },
+    })
+
+    const message = computed((): v.InferOutput<typeof ServerSchemas> | null => {
+      try {
+        return JSON.parse(partySocket.data.value || '')
+      }
+      catch (error) {
+        return null
+      }
+    })
+
+    return {
+      provide: {
+        partySocket,
+        message,
+      },
+    }
+  },
+})

playground/plugins/realtime-application.client.ts

@@ -0,0 +1,28 @@
+export default defineNuxtPlugin({
+  name: 'realtime-application',
+  parallel: true,
+  dependsOn: ['partykit'],
+  setup() {
+    const { $message } = useNuxtApp()
+
+    watch($message, (event) => {
+      if (!event?.type) return console.warn('Unknown event received: ', JSON.stringify(event))
+      const { type, data } = event
+
+      console.log('Received event: ', type, data)
+
+      switch (type) {
+        // message
+        case 'message':
+          navigateTo('/')
+          alert('Message received')
+          break
+
+        // unknown event
+        default:
+          console.warn('Unknown event received: ', event)
+          break
+      }
+    })
+  },
+})