This is 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.
You must install this package along with Vue.js and an implementation of the Graffiti API. In this example, we will use the local implementation of the Graffiti API, but any other would be similar. In node.js, simply install them with npm:
npm install vue
npm install @graffiti-garden/implementation-local
npm install @graffiti-garden/wrapper-vue
In the browser, you can use a CDN like
jsDelivr.
Add an import map the the <head> of your HTML file:
<head>
<script type="importmap">
{
"imports": {
"vue": "https://cdn.jsdelivr.net/npm/vue/dist/vue.esm-browser.js",
"@graffiti-garden/implementation-local": "https://cdn.jsdelivr.net/npm/@graffiti-garden/implementation-local/dist/browser/index.js",
"@graffiti-garden/wrapper-vue": "https://cdn.jsdelivr.net/npm/@graffiti-garden/wrapper-vue/dist/browser/plugin.mjs"
}
}
</script>
</head>
In ether case install the plugin in your Vue app as follows:
import { createApp } from "vue";
import { GraffitiLocal } from "@graffiti-garden/implementation-local";
import { GraffitiPlugin } from "@graffiti-garden/wrapper-vue";
createApp({})
.use(GraffitiPlugin, {
useGraffiti: new GraffitiLocal(),
})
.mount("#app");