app-example.html

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

<head>
  <title>Chat example</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./app/dist/app.css" />
  <script type="importmap">
			{ "imports": { "@gun-vue/app": "https://esm.sh/@gun-vue/app"} }
		</script>
  <script type="module">
    import { createGunVueApp } from "@gun-vue/app";
    createGunVueApp("#app");
  </script>
</head>

<body>
  <div id="app" class="flex flex-col">
    <gun-settings></gun-settings>
    <div class="flex items-center gap-4 p-4">
      <h1 class="p-4 text-lg flex-1">Chat example app</h1>
      <gun-relay></gun-relay>
      <user-icon></user-icon>
    </div>
    <chat-room topic="Chat example"></chat-room>
    <room-profile></room-profile>

  </div>
</body>

</html>