Install

npm install --save vue-facebook-login-component

Usage

To use the component in your template, simply import and register with your component.

Script

import VFacebookLogin from 'vue-facebook-login-component'

export default {
  components: {
    VFacebookLogin
  }
}

Template

<v-facebook-login app-id="966242223397117"></v-facebook-login>

Props

Name	Type	Default	Note
value	Object	{ connected: false }	Used for one-way V-Model. [ *** ]
app-id	String	None	Required. [ *** ]
version	String	'v3.1'	[ **, *** ]
options	Object	{}	[ *, **, *** ]
login-options	Object	{ scope: 'email' }	[ *, **, *** ]
button-style	Object	{}	[ * ]
loader-style	Object	{}	[ * ]
token-style	Object	{}	[ * ]
text-style	Object	{}	[ * ]
transition	Array	[]	Array of CSS transition values. Example: [ 'background-color 0.15s ease-in-out', 'padding 0.15s ease-in-out', ... ].
use-alternate-logo	Boolean	false	Use Iconmonstr alternate Facebook logo.

[ * ] - Properties should be camel-case.
[ ** ] - See Facebook for available values.
[ *** ] - Scope-component property.

Slots

Name	Default	Description
login	'Sign in with Facebook'
logout	'Sign out with Facebook'
working	'Please wait...'
logo	Iconmonstr Facebook 1	See Iconmonstr for more options.
before	NONE	Before all nested elements.
after	NONE	After all nested elements.
error	'⛔ Network Error'	Shown on SDK load failure.

Events

Name	Payload	Description	Note
sdk-init	(sdk[Object])	Returns an object with Facebook SDK instance and scope object.	[ * ]
login	(response[Object])	User attempted login.	[ * ]
logout	(response[Object])	User attempted logout.	[ * ]
connect	Boolean	User is connected.	[ * ]
click	None		[ * ]

[ * ] - Scope-component event.

⚠️ Sdk-Init Event

You can use this event to grab the Facebook SDK instance, but also the underlying component scope object. Using this object, you can control the component empirically, similarly to how you would with ref. See example:

<template>
  <v-facebook-login @sdk-init="handleSdkInit" />
  <button v-if="facebook.scope.logout" @click="facebook.scope.logout">
    Logout
  </button>
</template>

<script>
  export default = {
    data: () => ({
      facebook: {
        FB: {},
        scope: {},
      }
    }),
    methods: {
      handleSdkInit({ FB, scope }) {
        this.facebook.scope = scope
        this.facebook.FB = FB
      }
    }
  }
</script>

Scope component (Advanced Customization)

If props, slots and events do not satisfy your customization needs, you can use an underlying component called v-fb-login-scope. This component uses the render prop (known as "scoped-slot" in Vue) approach for composition. This means, it does not render any html or css, hence it has no added-value on its own. It only exposes a scoped-slot with attributes and methods that are committed as API.

Props/Events

Refer to the tables above for scope-component specific props/events.

Scoped-Slot Scope (Attributes and Methods)

Name	Type	Description
login	Function	Login handler.
logout	Function	Logout handler.
toggleLogin	Function	Toggles login/logout.
working	Boolean	SDK-initialization/login/logout is currently taking place.
connected	Boolean	User is logged in.
disconnected	Boolean	User is logged out.
enabled	Boolean	Button is enabled.
disabled	Boolean	Button is disabled.

Scope component example (for a full example see source).

<template>
  <v-facebook-login-scope>
    <!-- Compose HTML/CSS here, otherwise nothing will be rendered -->
    <button slot-scope="scope">
      <!-- Compose with `scope` here -->
    </button>
  </v-facebook-login-scope>
</template>

<script>
  import { VFBLoginScope } from 'vue-facebook-login-component'

  export default {
    components: {
      VFBLoginScope
    }
  }
</script>

Loading Facebook SDK

This component embeds the Facebook SDK snippet, so you don't have to do it yourself. However, if you want to embed it yourself, you can do so and the component will pick up the SDK instance instead.

Uncaught ReferenceError: regeneratorRuntime is not defined

This package uses async/await syntax, which is based on generators. In short, if you target old browsers (think about that carefully) you'll have to add regenerator-runtime to your dependencies. See this issue for more details.

npm install --save regenerator-runtime

Then, import it at the topmost of your main.js (or similar entry-point).

import 'regenerator-runtime'

// ...rest of your imports

IE support

Add babel-polyfill to your dependencies.

Development

Fork, clone and use the following scripts.

For component:

npm start

For documentation (includes a demo):

npm run docs

Support

Please open an issue for support.

License

Copyright (c) 2018 by MIT