From 509365a89dcb7bf35d1834140f3e402f79fc7b0d Mon Sep 17 00:00:00 2001
From: Avi Zimmerman <avi.zimmerman@gmail.com>
Date: Sun, 12 Nov 2023 15:11:43 +0200
Subject: [PATCH] add examples to README

---
 README.md | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 104 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index efc7a50..e591aeb 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,107 @@
 # webmesh-vue
 
-Vue composables for working with a webmesh daemon
+Vue composables for working with a webmesh daemon.
 
-_Work in progress_
+## Installation
+
+```bash
+npm install @webmeshproject/vue
+# or
+yarn add @webmeshproject/vue
+```
+
+## Usage
+
+### Managing networks
+
+```vue
+<template>
+<div>
+  <h1>Networks</h1>
+  <ul>
+    <li v-for="network in networks" :key="network.name">
+      <span>{{ network.name }}</span>
+      <button @click="() => removeNetwork(network.name)">Remove</button>
+    </li>
+  </ul>
+  <form @submit.prevent="createNetwork({ id: networkName })">
+    <input v-model="networkName" />
+    <button type="submit">Create</button>
+  </form>
+</template>
+
+<script setup>
+import { NetworkParameters, useWebmesh } from '@webmeshproject/vue';
+
+const { putNetwork, dropNetwork, networks } = useWebmesh();
+
+const createNetwork = async (params: NetworkParameters) => {
+  try {
+    await putNetwork(params);
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+const removeNetwork = async (name: string) => {
+  try {
+    await dropNetwork(name);
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+return { networks, createNetwork, removeNetwork };
+</script>
+```
+
+### Connecting and disconnecting networks.
+
+```vue
+<template>
+    <div>
+        <div v-if="network?.connected">
+            <h1>Connected to {{ network?.name }}</h1>
+            <button @click="disconnectFromNetwork">Disconnect</button>
+            <div>
+                <h2>Metrics</h2>
+                <pre>{{ metrics }}</pre>
+            </div>
+        </div>
+        <div v-else>
+            <h1>Not connected to {{ networkID }}</h1>
+            <button @click="connectToNetwork">Connect</button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { Network, useWebmesh } from '@webmeshproject/vue';
+
+const { connect, disconnect, deviceMetrics } = useWebmesh(daemon.options);
+const networkID = 'test-network';
+
+const metrics = deviceMetrics(networkID, 3000);
+const network = ref<Network | null>(null);
+
+const connectToNetwork = async () => {
+    try {
+        network.value = await connect({ id: networkID });
+    } catch (err) {
+        console.error(err);
+    }
+};
+
+const disconnectFromNetwork = async () => {
+    try {
+        await disconnect(networkID);
+        network.value = null;
+    } catch (err) {
+        console.error(err);
+    }
+};
+
+return { metrics, networkID, network, connectToNetwork, disconnectFromNetwork };
+</script>
+```