plugins/vue/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!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>