3 files changed, 29 insertions, 40 deletions
diff --git a/plugins/vue/demo/index.html b/plugins/vue/demo/index.html
index e0c841f..7a142c1 100644
--- a/plugins/vue/demo/index.html
+++ b/plugins/vue/demo/index.html
@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
   <script async src="https://ga.jspm.io/npm:es-module-shims@1.6.2/dist/es-module-shims.js"></script>
   <script type="importmap">{ "imports": {
-    "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.esm-browser.min.js",
+    "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.esm-browser.prod.min.js",
     "graffiti-vue": "../plugin.js"
   }}</script>
   <script type="module">
@@ -27,6 +27,13 @@
 <body id="app">
 <!-------------------------------------------------------------->
 
+  <h1>
+    Connection Status
+  </h1>
+
+  <p>
+    Connected to the Graffiti server? {{ $graffitiConnected }}
+  </p>
 
   <h1>
     Logging In
@@ -38,6 +45,10 @@
     </button>
   </p>
 
+  <p>
+    My Graffiti ID is "{{ $graffitiMyID }}"
+  </p>
+
   <br>
 
   <h1>
diff --git a/plugins/vue/index.html b/plugins/vue/index.html
deleted file mode 100644
index ceea8c7..0000000
--- a/plugins/vue/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <script async src="https://ga.jspm.io/npm:es-module-shims@1.6.2/dist/es-module-shims.js"></script>
-  <script type="importmap">{ "imports": {
-    "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.esm-browser.min.js"
-  }}</script>
-  <script type="module">
-    import { createApp } from 'vue'
-    import GraffitiVue from './plugin.js'
-
-    createApp()
-    .use(GraffitiVue, {url: "http://localhost:5001"})
-    .mount('#app')
-  </script>
-</head>
-<body id="app">
-  {{ $graffitiID }}
-
-  <button @click="$graffitiToggleLogIn">
-    Log In
-  </button>
-
-  <graffiti-objects :tags="['asdf']" v-slot="{objects}">
-    <li v-for="object in objects">
-      {{object._tags}}
-      <button @click="object._remove()">
-        ❌
-      </button>
-    </li>
-  </graffiti-objects>
-
-</body>
-</html>
diff --git a/plugins/vue/plugin.js b/plugins/vue/plugin.js
index bfca17c..76fb0de 100644
--- a/plugins/vue/plugin.js
+++ b/plugins/vue/plugin.js
@@ -10,13 +10,25 @@ export default {
     // Initialize graffiti with reactive entries
     const graffiti = new Graffiti(graffitiURL, ()=>reactive({}))
 
-    // These ID need to change after opening
-    const myID = ref(null)
-    graffiti.opened().then(()=> {
-      myID.value = graffiti.myID
+    // Create a reactive variable that tracks
+    // connection changes
+    const connectionState = ref(false)
+    ;(function waitForState(state) {
+      graffiti.connectionState(state).then(()=> {
+        connectionState.value = state
+        waitForState(!state)
+    })})(true)
+    Object.defineProperty(app.config.globalProperties, "$graffitiConnected", {
+      get: ()=> connectionState.value
     })
+
+    // the connection state becomes true
+    let myID = null
     Object.defineProperty(app.config.globalProperties, "$graffitiMyID", {
-      get: ()=> myID.value
+      get: ()=> {
+        if (connectionState.value) myID = graffiti.myID
+        return myID
+      }
     })
 
     // Add static functions