A renderless Vue.js component for composing Facebook login

by Vue.js Examples

Vue Facebook Login

A renderless Vue.js component for composing Facebook login.

View Demo View Github

Install

NPM

npm install vue-facebook-login-component

Yarn

yarn add vue-facebook-login-component

Embed Directly

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

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 (gzipped: 22.1K)
  • Handpicked Facebook SVG logos (Iconmonstr)
  • Customizable through props and scoped-slots
  • Scope component (renderless/render-props pattern)
  • Button component with flex-box CSS and rem sizing

JS Fiddle

See JS Fiddle for a vanilla example.

What's New in Version 2.0

Simpler API, alongside newly added and updated features (mind breaking-changes).

Added

  • Added test coverage.
  • Added multiple instance support.
  • Added scope field idle.
  • Added prop logoClass.
  • Added prop textClass.
  • Added prop loaderClass.
  • Added prop useAltLogo.

Updated

  • Updated style with leaner CSS.
  • Updated all slots to scoped-slots.
  • Updated prop version default to: v6.0.
  • Updated error slot to appear on all errors.
  • Updated logo to comply with Facebook guidelines.
  • Updated labels to comply with Facebook guidelines.

Fixed

  • Fixed disabled state when app-id is not provided.

Removed

  • Removed event connect (use login instead).
  • Removed prop buttonStyle (use style instead).
  • Removed scope field hasError (use error instead).

Props

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.

Note Asterisks Legend

Type Description
* Properties should be camel-case. Example: login-options → loginOptions.
** See Facebook for available values.
*** Scope component property.

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. Read more about scoped slots.

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

Scope Component Example

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>

Loading Facebook SDK

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.

"Uncaught ReferenceError: regeneratorRuntime is not defined"

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

IE support

Add babel-polyfill to your dependencies. Notice the deprecated method and the newly recommended method.

Development

Fork, clone and use the following scripts.

Component

yarn start

Documentation

yarn start:docs

GitHub