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.

API method	Composable	Component
discover	useGraffitiDiscover	GraffitiDiscover
get	useGraffitiGet	GraffitiGet
recoverOrphans	useGraffitiRecoverOrphans	GraffitiRecoverOrphans

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 composable functions.

Global variabale	Composable
$graffiti	useGraffiti
$graffitiSession	useGraffitiSession

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.put({
      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="{ results }"
    :channels="[ 'my-channel' ]"
    :schema="{
      properties: {
        value: {
          required: ['content'],
          properties: {
            content: { type: 'string' }
          }
        }
      }
    }"
  >
    <ul>
      <li
        v-for="result in results"
        :key="$graffiti.objectToUri(result)"
      >
        {{ result.value.content }}
      </li>
    </ul>
  </GraffitiDiscover>
</template>
Copy