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

npm i -S vue-social

Use the Vue plugin

import Vue from 'vue'
import VueSocial from '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'
}

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
        const result = await social.login(platform, {
          terms: 1, newsletter: 0
        })
 
        // do something with the result here
      } catch (error) {
        // handle error here
      }
    }
  }
}