Skip to content

kishorgandham/vue-facebook-login-component

 
 

Repository files navigation

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'

// OR, use cherry-pick export (better consistency)
import { VFBLogin as 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', ... ].

[ * ] - 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...'
before NONE Before all nested elements.
after NONE After all nested elements.

Events

Name Payload Description Note
sdk-init (sdk[Object]) Returns an object with
a Facebook SDK instance.
[ * ]
login (response[Object]) User attempted login. [ * ]
logout (response[Object]) User attempted logout. [ * ]
connect Boolean User is connected. [ * ]
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>
    <!-- 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>

IE support

Add babel-polyfill to your app 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

About

A renderless component for composing Facebook login

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 63.5%
  • Vue 36.5%