Vue Facebook Login

A renderless Vue.js component for composing Facebook login.

Install

NPM

npm install vue-facebook-login-component

Yarn

yarn add vue-facebook-login-component

NPM (Vue 3)

npm install vue-facebook-login-component-next

Yarn (Vue 3)

yarn add vue-facebook-login-component-next

Embed Directly

<script src="https://cdn.jsdelivr.net/npm/vue-facebook-login-component/dist/vueFacebookLoginComponent.umd.min.js"></script>

When embedding, the script automatically registers itself as a Vue plugin.

Usage

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

Template and Script

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

<script>
  import VFacebookLogin from 'vue-facebook-login-component'

  export default {
    components: {
      VFacebookLogin,
    },
  }
</script>

Features

• Zero dependencies (umd, minified + gzipped at 7.85 KiB).
• Supports Vue.js 3 (umd, tree-shakeable, minified + gzipped at 3.6 KiB).
• Customizable through props and scoped-slots.
• Scope component (renderless/render-props pattern).
• Button component with CSS Flexbox and rem sizing.
• High quality, handpicked freeware SVG logos.

JS Fiddle

See JS Fiddle for a vanilla example.

Props

Name	Type	Default	Note
value	Object	{}	Used for one-way V-Model. [ * ]
app-id	String	NONE	Required. [ * ]
version	String	'v6.0'	See versions. [ * ]
options	Object	{ cookie: true, xfbml: true, autoLogAppEvents: true }	See options. [ * ]
login-options	Object	{ scope: 'email' }	See options. [ * ]
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 Flaticon Facebook logo.
async-delay	Number	0	Minimum delay for asynchronous operations. [ * ]
sdk-locale	String	'en_US'	See localization. [ * ]

[ * ] - Scope component prop.

useAltLogo Prop

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.

Slots

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).

Events

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.

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.

⚠️ 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.

Sdk-Init Event Example

<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>

Scope Component (Advanced Customization)

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.

Props and Events

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

Scoped-Slot Scope (Attributes and Methods)

Name	Type	Description
login	Function	Call SDK login method.
logout	Function	Call SDK logout method.
toggleLogin	Function	Toggle SDK login/logout methods.
working	Boolean	Asynchronous operation is taking place.
idle	Boolean	No 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.

Scope Component Example

The following snippet is a minimal usage example, see source for a real-world 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 as VFacebookLoginScope } from 'vue-facebook-login-component'

  export default {
    components: {
      VFacebookLoginScope,
    },
  }
</script>

Loading Facebook SDK

This component embeds the Facebook SDK snippet unless it find an existing SDK instance. However, be sure to resolve window.fbAsyncInit before a component instance is created, otherwise a racing condition will occur and it may not be able to find the SDK instance. See Facebook docs for more.

Nuxt Support

This component renders on the client-side only. To do that, you have to complete a few steps.

1. Generate a self-signed certificate.
2. Configure nuxt.config.js for HTTPS.
3. Import the component for client-side only:

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

<script>
  export default {
    components: {
      VFacebookLogin: () =>
        process.client ? import('vue-facebook-login-component') : null,
    },
  }
</script>

Legacy Browser Support

Version 3.x

🧡 Mind breaking changes from 3.x to 2.x.

Version 3.x does NOT include polyfills (core-js) as 2.x, in fact it was an error to include them at all. If you require new language API support for legacy browsers, you might have to add it to your app or setup your build target correctly, which will auto apply the necessary polyfills. See Vue CLI docs: https://cli.vuejs.org/guide/browser-compatibility.html#polyfills

Version 2.x

❤️ You probably don't need to apply transformations or polyfills to support IE.

The current build statistically targets legacy browsers like IE 11 and applies transforms and polyfills adaptively. However, it is bound to change in the future as statistics change. In such case, you'll need to add @babel/polyfill to your dependencies (notice the deprecated way to do it and the newly recommended one). Additionally, you'll have to add this component to your transpiled dependencies (e.g., using transpileDependencies option in vue.config.js).

⚠️ Notice the difference between a transform and a polyfill. Future syntax has to be transformed, while new language API requires a polyfill.

Version 1.x

💚 TL;DR: Upgrade to 2.x to support legacy browsers.

Versions <=1.3.6 should work in legacy browsers without issues. Versions 1.3.7-1.5.0 require @babel/polyfill if your app doesn't already include it. Versions 1.5.1 to 1.6.0 have a maltransformed and unpolyfilled build that will not work with legacy browsers unless you add it to your transpiled dependencies and import @babel/polyfill. To fix that please upgrade to 2.x (recommended) or downgrade to <= 1.5.0.

Development

Fork, clone and use the following scripts.

Component

yarn start

Documentation

yarn start:docs

Tests

yarn test

Support

Please search existing issues (including closed ones) before starting a new issue. 🙌

Contributing

Start a pull request, run tests and update as necessary before submitting.

Attributions

• flaticon
• iconmonstr

Related Links

• Facebook API documentation.
• Facebook user experience guideline.
• Facebook fonts and colors, article by Sitepoint.

License

Copyright (c) 2020 by MIT