components/example.html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Private chat example</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/@gun-vue/components/dist/style.css">
  <script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3.2.31/dist/vue.esm-browser.js",
      "@gun-vue/components": "https://unpkg.com/@gun-vue/components@0.21.5",
    }
  }
  </script>
  <script type="module">
    import { createApp } from 'https://esm.sh/vue'
    import { GunVuePlugin } from 'https://unpkg.com/@gun-vue/components@0.21.5'

    const app = createApp({
      data() {
        return {
          other: ''
        }
      }
    })

    app.use(GunVuePlugin)
    app.mount('#app')
  </script>

</head>

<body>

  <div id="app" class="flex-col gap-2">
    <h1 class="text-2xl p-2">Private chat example Gun-Vue app</h1>
    <div class="flex flex-wrap items-center gap-2 p-4">
      <gun-relay></gun-relay>
      <user-icon></user-icon>
      <room-button></room-button>
    </div>
    <keep-alive max="5">
      <template v-if="!other">
        <guest-list @user="other=$event"></guest-list>
        <guest-list @user="other=$event" state="offline"></guest-list>
      </template>

      <chat-private v-else :pub="other">
        <button class="button" @click="other=''">Close</button>
      </chat-private>
    </keep-alive>
  </div>

</body>

</html>