Gun-Vue | Gun-Vue docs

Let's build our first Gun-Vue web-app

Create an empty text file and call it app.html
Copy and paste this code into it.

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="https://unpkg.com/@gun-vue/components/dist/style.css" />
  <script type="importmap">
			{ "imports": { "app": "https://unpkg.com/@gun-vue/app" } }
		</script>
  <script type="module">
    import { createGunVueApp } from "app";
    createGunVueApp("#app");
  </script>
</head>

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

</html>

Change in the #app section and modify the chat topic if you want.
Save the file and open it with any browser. Welcome to your first p2p chat app!

Let's build our first Gun-Vue web-app ​

Let's build our first Gun-Vue web-app