A renderless Vue.js component for composing Facebook login

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

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

Note Asterisks Legend

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

Events

[ * ] - 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)

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