@blocklevel/vue-social

Vue Social

A Vue plugin for social share and oAuth login purposes This is build for a Vue/Webpack setup such as Blue

Quickstart

Install the package (this is a scoped package)

npm i -S @blocklevel/vue-social

Use the Vue plugin

import Vue from 'vue'
import VueSocial from '@blocklevel/vue-social'

// the options passed here are passed by default
// you don't have to set them explicitly
Vue.use(VueSocial, {

  // this is the name for the callback fired
  // when the login popup is redirected to the callback URL
  callbackName: 'handleSocialAuthResponse',

  // This defines the width/height of the share/login popup
  popup: {
    width: 800,
    height: 600
  }
})

Set the auth URLs

This is needed for logging in with the oAuth provider, this assumes you have your own back-end implementation

Vue.social.auth = {
  facebook: 'https://exampledomain.com/api/auth/facebook',
  twitter: 'https://exampledomain.com/api/auth/twitter',
  linkedin: 'https://exampledomain.com/api/auth/linkedin'
}

API reference

The plugin exposes some methods to Vue

Vue.social.login(platform, query)

• Arguments
  • {String} [platform]
  • {Object} [query]
• Usage

// import the social plugin
import { social } from 'vue'

// This resembles a really simple login component
export default {

  methods: {
    async login (platform) {
      try {
        // fire the social.login
        // platform can be one the keys provided in Vue.social.auth
        // e.g. facebook, twitter or linkedin
        // second parameter are the parameters concatenated by the URL
        const result = await social.login(platform, {
          terms: 1,
          newsletter: 0
        })

        // do something with the result here
      } catch (error) {
        // handle error here
      }
    }
  }
}

Vue.social.share(platform, attributes)

• Arguments
  • {String} [platform]
  • {Object} [attributes]
• Usage

// import the social plugin
import { social } from 'vue'

// This resembles a really simple login component
export default {

  methods: {
    share (platform) {
      social.share(platform, {
        // the url you want to share
        url: 'http://blocklevel.nl',

        // the title of the shared post (for linkedin and facebook)
        title: 'test title',

        // the description of the shared post (all platforms)
        description: 'test description',

        // hashtags are only used for twitter, should be a comma seperated string
        hashtags: 'blocklevel,blue,webpack,vue'
      })
    }
  }
}