diff options
Diffstat (limited to 'plugins/vue/plugin.js')
-rw-r--r-- | plugins/vue/plugin.js | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/plugins/vue/plugin.js b/plugins/vue/plugin.js new file mode 100644 index 0000000..e5483c6 --- /dev/null +++ b/plugins/vue/plugin.js @@ -0,0 +1,58 @@ +import { ref, reactive } from 'vue' +import Graffiti from '../../graffiti.js' + +export default { + install(app, options) { + + const graffitiURL = options && 'url' in options? + options.url : 'https://graffiti.garden' + + // Initialize graffiti + const graffiti = new Graffiti(graffitiURL, ()=>reactive({})) + + // These ID need to change after opening + app.config.globalProperties.$graffitiID = ref(null) + graffiti.waitTilOpen().then(()=> { + app.config.globalProperties.$graffitiID.value = graffiti.myID + }) + + // Add logging in and out + app.config.globalProperties.$graffitiToggleLogIn = + graffiti.toggleLogIn.bind(graffiti) + + // A composable for subscribing and + // unsubscribing to tags that returns + // a reactive array of the results + app.component('GraffitiObjects', { + + props: ['tags'], + + watch: { + tags: { + async handler(newTags, oldTags=[]) { + // Subscribe to the new tags + await graffiti.subscribe(...newTags) + // Unsubscribe to the existing tags + await graffiti.unsubscribe(...oldTags) + }, + immediate: true, + deep: true + } + }, + + // Handle unmounting too + unmount() { + graffiti.unsubscribe(this.tags) + }, + + computed: { + objects() { + return graffiti.objectsByTags(...this.tags) + } + }, + + template: '<slot :objects="objects"></slot>' + }) + + } +} |