SteemConnect Plugin for Vue.js

in utopian-io •  10 days ago

image.png

Repository

https://github.com/mktcode/vue-steemconnect

I tried now several times to include SteemConnect in a Vue.js app and I think there's need for a plugin. What I did is really nothing special but maybe it can be a start for others to work on this and improve it. I never wrote a plugin for Vue.js, so this is more an experiment for me. But it works.

The main purpose for now is simply to have sc2-sdk installed with the plugin and making it globally available in one step.

It takes the options to initialize the API and exposes it globally and for components:

Vue.prototype.$steemconnect = api;
// setting the api directly as the value does not work,
// methods are removed (why? serialization?)
Vue.SteemConnect = function () {
  return api;
};

Maybe you can answer the question in this comment... you see, I'm a novice. Why does Vue.SteemConnect = api; not work? The methods, like getLoginURL(), are not available then.

From the Readme:

npm i --save vue-steemconnect

Use it anywhere you want like this:

import Vue from 'vue'
import VueSteemConnect from 'vue-steemconnect'

Vue.use(VueSteemConnect, {
  app: 'appname',
  redirectUrl: 'http://localhost:3000'
  scope: ['vote', 'comment']
})

Vue.SteemConnect.getLoginURL()
Vue.SteemConnect.vote(...)
Vue.SteemConnect.comment(...)

In components it's available like this:

this.$steemconnect.getLoginURL()
this.$steemconnect.vote(...)
this.$steemconnect.comment(...)
...

I like Nuxt.js, so here's how to enable the plugin there:

Nuxt.js

Create a ~/plugins/vue-steemconnect.js:

import Vue from 'vue'
import VueSteemConnect from 'vue-steemconnect'

Vue.use(VueSteemConnect, {
  app: 'mkt.test',
  callbackURL: 'http://localhost:3000/auth',
  scope: ['vote', 'comment']
})

And enable it in ~/nuxt.config.js:

plugins: [
  '~/plugins/vue-steemconnect'
],

Again, this is my first try to create a Vue.js plugin and it's really nothing more than a simple wrapper, so to speak. I don't even know if it's really useful like this but I just think it would be nice to have something like this, for all Steem developers that like Vue.js. Everyone is kindly invited to make this a really useful plugin. Because since now you can instead just install sc2-sdk yourself and import it anywhere you want. Maybe some of you have ideas for actually useful features.

For example:

  • If Vuex store exists, automaticall add a steemconnect.user property
  • Wrap methods, to automatically use logged-in user in methods that require a username parameter (vote, reblog, follow, etc.)

I would be happy to get some feedback, from more experienced Vue.js developers. Feel free to comment what you think.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thanks for the information @mkt

@mkt You have received a 100% upvote from @steemprotector because this post did not use any bidbots and you have not used bidbots in the last 30 days!

Upvoting this comment will help keep this service running.

Thank you for your contribution. It will benefit for those who will be working on Vue.js application.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Hey @mkt
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!