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 (Gzipped: 7.85 KiB)
• Handpicked Facebook SVG logos
• 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.

Props

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

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