@blocklevel/vue-social/README.md

Vue plugin for social share and oAuth login

# Vue Social
> A Vue plugin for social share and oAuth login purposes
> This is build for a Vue/Webpack setup such as [Blue](https://github.com/blocklevel/blue)

## Quickstart

### Install the package (this is a scoped package)
``` bash
npm i -S @blocklevel/vue-social
```

### Use the Vue plugin
``` javascript
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

``` javascript
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
``` javascript
// 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'
      })
    }
  }
}
```