A Vue component for reading and writing personal information using the Graffiti API. Inspired by the madata Vue component.
You must install this package along with Vue.js, an implementation of the Graffiti API, and the Graffiti Vue wrapper. 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
npm install @graffiti-garden/wrapper-vue-personal-data
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",
"@graffiti-garden/wrapper-vue-personal-data": "https://cdn.jsdelivr.net/npm/@graffiti-garden/wrapper-vue-personal-data/dist/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";
import { GraffitiPersonalDataPlugin } from "@graffiti-garden/wrapper-vue-personal-data";
createApp({})
.use(GraffitiPlugin, {
graffiti: new GraffitiLocal(),
})
.use(GraffitiPersonalDataPlugin);
.mount("#app");