Repository

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

NPM Package

https://www.npmjs.com/package/vue-steemconnect

Formerly this Vue.js plugin was a simple wrapper to install the SteemConnect SDK and make it globally available in a Vue.js project.
Now I added a truely handy new feature.

Vuex Module for Login/Logout

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

With this change, the plugin is now actually quite handy. To fully implement SteemConnect login you have to follow these simple steps:

npm i vue-steemconnect --save

In your main.js file add these lines:

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

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

Now you have access to SteemConnect like this:

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

And in components:

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

To implement login/logout simply add the module to your Vuex store:

import Vue from 'vue'

const store = new Vuex.Store({
  state: {
    ...
  },
  modules: {
    steemconnect: Vue.SteemConnectStore
  }
})

This adds a user property and two actions (and related mutations/getters) to your store.

Login

this.$store.dispatch('login')

The login action tries to get an access token from local storage and use it to get the user's account data from SteemConnect.

login ({ commit, dispatch, state }) {
  return new Promise((resolve, reject) => {
    // don't do anything if user data is already set
    if (!state.user) {
      // in that case we look for an access token in localStorage
      const accessToken = localStorage.getItem('access_token')
      if (accessToken) {
        // set access token and try to fetch user object
        Vue.SteemConnect().setAccessToken(accessToken)
        Vue.SteemConnect().me((err, user) => {
          if (err) reject(err)
          else {
            // save user object in store
            commit('login', user)
            resolve()
          }
       })
     }
   }
})

You can access the user data via this.$store.state.steemconnect.user.

But actually I recommend to use Vuex's mapGetters helper.

import { mapGetters } from 'vuex'

...

computed: {
  ...mapGetters(['user', ...])
}

Then you can access it simply as user in your component.

Logout

this.$store.dispatch('logout')

The logout action simply removes the access token from local storage and removes the user's account data.

logout ({ commit }) {
  // remove access token and unset user in store
  localStorage.removeItem('access_token')
  commit('logout')
}

Auth Page

To avoid having the access token in the URL all the time after being redirected from SteemConnect, you should have an auth page that just saves the access token in local storage and redirects to another page. I usually do this in the mounted method.

async mounted () {
  let accessToken = this.$route.query['access_token']
  if (accessToken) {
    localStorage.setItem('access_token', accessToken)
    await this.$store.dispatch('login')
    this.$router.push('/')
  }
}

Note that it needs the async keyword because you want to await the login action and then redirect.

(Don't forget to set the correct callbackURL when initializing the plugin.)

In Short

• npm install the plugin
• import and Vue.use() it
• add Vue.SteemConnectStore module to Vuex
• use this.$steemconnect.getLoginURL() for your login button
• save access token to local storage on a separate auth page and redirect the user
• use this.$store.dispatch('login') to load user data
• access user data with this.$store.state.steemconnect.user
• use this.$store.dispatch('logout') to remove access token and user data

ES6

Moreover I am now using ES6 syntax and convert it to ES5 only on build/publish.

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

That's why there's now a src and a dist directory.

"main": "dist/index.js",
"scripts": {
  "build": "babel src --presets babel-preset-es2015 --out-dir dist",
  "prepublish": "npm run build"
}

^{(package.json)}

Contribute

This is the first time that I'm working on a Vue.js plugin. I have no idea if the way I do things is the recommended one. Actually I'm pretty sure there's a lot of room for improvement, not only in terms of features but also in terms of best practices and coding style. But it works... at least for me.

Anyway, since I think this can be really really handy for a lot of developers that work with Steem, I would like to invite everyone who's more experienced with Vue.js plugin development to help me with that.

Everyone else is of course invited to suggest more features and share ideas. Maybe over time this project can evolve into a comprehensive Steem utility for Vue.js... who knows.