A renderless component for composing Vue Facebook login
npm install --save vue-facebook-login-component
To use the component in your template, simply import and register with your component.
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
}
}
<v-facebook-login app-id="966242223397117"></v-facebook-login>
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.
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. |
error | 'Network Error' |
Shown on SDK load failure. |
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.
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.
Refer to the tables above for scope-component specific props/events.
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. |
<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>
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.
Add babel-polyfill to your app dependencies.
Fork, clone and use the following scripts.
For component:
npm start
For documentation (includes a demo):
npm run docs
#vue-login #login-component #facebook-login #vue