created playground application

Author: manchenkoff

playground/app.vue

@@ -1,5 +1,7 @@
 <template>
-  <div>Nuxt module playground!</div>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
 
 <script setup></script>

playground/error.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface ErrorProps {
+  error?: {
+    url: string
+    statusCode: number
+    statusMessage: string
+    message: string
+    description: string
+    data?: object
+  }
+}
+
+const props = defineProps<ErrorProps>()
+</script>
+
+<template>
+  <NuxtLoadingIndicator />
+
+  <h1>Nuxt - Laravel Echo application sample</h1>
+
+  <strong>Error</strong>
+
+  <p>{{ props.error }}</p>
+</template>
+
+<style scoped></style>

playground/layouts/default.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Laravel Echo - Sample application</h1>
+
+  <div>
+    <slot />
+  </div>
+</template>
+
+<style scoped></style>

playground/nuxt.config.ts

@@ -1,6 +1,11 @@
 export default defineNuxtConfig({
-  modules: ['../src/module'],
-  echo: {},
   devtools: { enabled: true },
   compatibilityDate: '2024-07-03',
+
+  modules: ['../src/module'],
+
+  echo: {
+    key: '9iaau1cgc7iqdt6ee97m',
+    scheme: 'http',
+  },
 })

playground/pages/index.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const echo = useEcho()
+
+const messages = ref<string[]>([])
+const writeNewMessage = (e: object) => messages.value.push(JSON.stringify(e))
+
+function stopAllListeners() {
+  echo.leaveAllChannels()
+}
+
+function subscribeToPublicChannel() {
+  const name = 'public'
+  const event = '.PublicEvent'
+
+  echo
+    .channel(name)
+    .listen(event, (e: object) => writeNewMessage(e))
+    .error((e: object) => {
+      console.error('Public channel error', e)
+    })
+}
+
+function subscribeToPrivateChannel() {
+  const name = 'users'
+  const event = '.PrivateEvent'
+
+  echo
+    .private(name)
+    .listen(event, (e: object) => writeNewMessage(e))
+    .error((e: object) => {
+      console.error('Private channel error', e)
+    })
+}
+</script>
+
+<template>
+  <div>
+    <button @click="subscribeToPublicChannel">
+      Subscribe to public channel
+    </button>
+    <button @click="subscribeToPrivateChannel">
+      Subscribe to private channel
+    </button>
+    <button @click="stopAllListeners">
+      Stop all listeners
+    </button>
+  </div>
+  <div>
+    <h2>Message history</h2>
+    <ol>
+      <li
+        v-for="message in messages"
+        :key="message"
+      >
+        {{ message }}
+      </li>
+    </ol>
+  </div>
+</template>
+
+<style scoped></style>