@blocklevel/vue social

Vue plugin for social share and oAuth login

Version: 2.1.0 Updated: 09/01/2017

By: Blocklevel License: MIT

Downloads Last 30 Days: 238

Install

npm i @blocklevel/vue-social
yarn add @blocklevel/vue-social

Repository: https://github.com/Blocklevel/vue-social

CDNs

bundle.run: https://bundle.run/@blocklevel/vue-social

jsDelivr: https://cdn.jsdelivr.net/npm/@blocklevel/vue-social

unpkg: https://unpkg.com/@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
``` javascript
// 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'
      })
    }
  }
}
Categories: Vue js