Vue Facebook Login A renderless Vue.js component for composing Facebook login.
npm install vue-facebook-login-component
yarn add vue-facebook-login-component
<script src="https://unpkg.com/vue-facebook-login-component/dist/vue-facebook-login-component.umd.min.js"></script>
When embedding, the script automatically registers itself as a Vue plugin.
To use the component in your template, simply import and register with your component.
<template>
<v-facebook-login app-id="966242223397117"></v-facebook-login>
</template>
<script>
import VFacebookLogin from 'vue-facebook-login-component'
export default {
components: {
VFacebookLogin
}
}
</script>
rem
sizingSee JS Fiddle for a vanilla example.
Simpler API, alongside newly added and updated features (mind breaking-changes).
idle
.logoClass
.textClass
.loaderClass
.useAltLogo
.version
default to: v6.0
.disabled
state when app-id
is not provided.connect
(use login
instead).buttonStyle
(use style
instead).hasError
(use error
instead).Name | Type | Default | Note |
---|---|---|---|
value | Object | {} |
Used for one-way V-Model. [ *** ] |
app-id | String | NONE |
Required. [ *** ] |
version | String | 'v6.0' |
[ **, *** ] |
options | Object | { cookie: true, xfbml: true, autoLogAppEvents: true } |
SDK options. [ *, **, *** ] |
login-options | Object | { scope: 'email' } |
[ *, **, *** ] |
logo-class | String | NONE |
[ * ] |
logo-style | Object | {} |
[ * ] |
text-class | String | NONE |
[ * ] |
text-style | Object | {} |
[ * ] |
loader-class | String | NONE |
[ * ] |
loader-style | Object | {} |
[ * ] |
transition | Array | [] |
Array of CSS transition values. Example: |
[ 'background-color 0.15s ease-in-out', 'padding 0.15s ease-in-out', ... ]
. |
| use-alt-logo | Boolean | false
| Use Iconmonstr alternate Facebook logo. |
Type | Description |
---|---|
* | Properties should be camel-case. Example: login-options → loginOptions . |
** | See Facebook for available values. |
*** | Scope component property. |
Offering an alternative logo from Iconmonstr (this will bring back v1.x
logo). This prop was released as useAlternateLogo
in 2.0.0
but shortened to useAltLogo
in 2.1.0
, a one-off breaking change.
Name | Default | Description |
---|---|---|
login | 'Continue with Facebook' |
|
logout | 'Logout' |
|
working | 'Please wait...' |
|
logo | Iconmonstr Facebook 6 | See Iconmonstr for more options. |
before | NONE |
Before all nested elements. |
after | NONE |
After all nested elements. |
error | '⛔ Error' |
Shown on error (e.g., SDK load failure). |
Name | Payload | Description | Note |
---|---|---|---|
sdk-init | (sdk[Object]) | Returns an object with | |
Facebook SDK instance and scope object. |
[ * ] | ||
login | (response[Object]) | User logged in. | [ * ] |
logout | (response[Object]) | User logged out. | [ * ] |
click | [Void] | [ * ] |
[ * ] - Scope component 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
.
⚠️ The scope reference is not reactive and you cannot relay on it for other than utilizing the scope methods. For reactivity, use the
v-model
directive.
<template>
<div>
<v-facebook-login v-model="model" @sdk-init="handleSdkInit" />
<button v-if="scope.logout && model.connected" @click="scope.logout">
Logout
</button>
</div>
</template>
<script>
export default {
data: () => ({
FB: {},
model: {},
scope: {}
}),
methods: {
handleSdkInit({ FB, scope }) {
this.FB = FB
this.scope = scope
}
}
}
</script>
If props, slots and events do not provide enough customization, 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, but rather expose a scoped-slot with attributes and methods that are committed as API. Read more about scoped slots.
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. |
idle | Boolean | No asynchronous operation is taking place. |
working | Boolean | Asynchronous operation is taking place. |
connected | Boolean | User is logged in. |
disconnected | Boolean | User is logged out. |
enabled | Boolean | Button is enabled. |
disabled | Boolean | Button is disabled. |
The following snippet is a minimal usage example, see source for a full, real-word example.
<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 do want to embed it yourself, you can do so and the component will pick up your SDK instance instead.
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 a similar entry-point).
import 'regenerator-runtime'
// ...rest of your imports
Add babel-polyfill to your dependencies. Notice the deprecated method and the newly recommended method.
Fork, clone and use the following scripts.
yarn start
yarn start:docs
Author: adi518
Live Demo: https://git.io/Jv61y
GitHub: https://github.com/adi518/vue-facebook-login-component
#vuejs #javascript #vue-js