redoc123/vue-facebook-login-component

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 VFBLogin from 'vue-facebook-login-component'

// OR, use cherry-pick export (better consistency)
import { VFBLogin } from 'vue-facebook-login-component'

export default {
  components: {
    VFBLogin
  }
}

Template

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

Props

Name	Type	Default	Note
value	Object	`{ connected: false }`	Scope-component prop. Used for one-way V-model.
app-id	String	None	Scope-component prop. Required prop.
version	String	`'v3.1'`	Scope-component prop. See Facebook Docs for available values.
options	Object	`{}`	Scope-component prop. See Facebook Docs for available values. Properties should be camel-case.
login-options	Object	`{ scope: 'email' }`	Scope-component prop. See Facebook Docs for available values. Properties should be camel-case.
button-style	Object	`{}`	Properties should be camel-case.
loader-style	Object	`{}`	Properties should be camel-case.
token-style	Object	`{}`	Properties should be camel-case.
text-style	Object	`{}`	Properties should be camel-case.

Slots

Name	Default
login	`'Log in to Facebook'`
logout	`'Log out from Facebook'`
working	`'Please wait...'`

Events

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

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>
    <button slot-scope="scope">
      <!-- Compose HTML/CSS here, otherwise nothing will be rendered! -->
    </button>
  </v-facebook-login-scope>
</template>

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

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

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.

redoc123 / vue-facebook-login-component