Variable GraffitiPluginConst

A Vue.js plugin that wraps around the Graffiti API to provide reactive versions of various Graffiti API methods.

These reactive methods are available as both renderless components, which make it possible to create a whole Graffiti app in an HTML template, and composables, which can be used in the programmatic composition API.

The plugin also exposes a global Graffiti instance and keeps track of the global GraffitiSession state as a reactive variable. They are available in templates as global variables or in setup functions as getter functions.

Finally, the plugin exposes an additional component, GraffitiObjectInfo that can be use to generically display a Graffiti object for debugging purposes. GraffitiDiscover and GraffitiGet show this output as fallback content if no template is provided

See the README for installation instructions.

You can try out live examples, but basic usage looks like this:

import { createApp } from "vue";
import { GraffitiPlugin } from "@graffiti-garden/vue";
import { GraffitiLocal } from "@graffiti-garden/implementation-local";
import App from "./App.vue";

createApp(App)
  .use(GraffitiPlugin, {
    graffiti: new GraffitiLocal(),
  })
Copy

<!-- App.vue -->
<template>
  <button
    v-if="$graffitiSession.value"
    @click="$graffiti.post({
      value: { content: 'Hello, world!' },
      channels: [ 'my-channel' ]
    }, $graffitiSession.value)"
  >
    Say Hello
  </button>
  <button v-else @click="$graffiti.login()">
    Log In to Say Hello
  </button>

  <GraffitiDiscover
    v-slot="{ objects }"
    :channels="[ 'my-channel' ]"
    :schema="{
      properties: {
        value: {
          required: ['content'],
          properties: {
            content: { type: 'string' }
          }
        }
      }
    }"
  >
    <ul>
      <li
        v-for="object in objects"
        :key="object.url"
      >
        {{ object.value.content }}
      </li>
    </ul>
  </GraffitiDiscover>
</template>
Copy