Facebook Sign-in Button For Vue.js

Facebook Sign-in Button For Vue.js

A simple Vue plugin to include a custom Facebook sign-in button into your web app.


A simple Vue plugin to include a custom Facebook sign-in button into your web app.



This plugin can be installed as a module

$ npm install vue-facebook-signin-button

or, if you're not in a modular environment, just include it as a <script>.


Important: The Facebook SDK must first be loaded asynchronously for the plugin to work. Something like this will do:

  window.fbAsyncInit = function() {
      appId      : '{your-app-id}',
      cookie     : true,  // enable cookies to allow the server to access the session
      xfbml      : true,  // parse social plugins on this page
      version    : 'v2.8' // use graph api version 2.8
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

Step 1: import and use the plugin if you're in a modular environment (you don't need this step otherwise, as the plugin will register itself).

import FBSignInButton from 'vue-facebook-signin-button'

Step 2: Now you have a fb-signin-button global component, ready for use. It's best to demonstrate the usage with an example:

    Sign in with Facebook

export default {
  data () {
    return {
      fbSignInParams: {
        scope: 'email,user_likes',
        return_scopes: true
  methods: {
    onSignInSuccess (response) {
      FB.api('/me', dude => {
        console.log(`Good to see you, ${dude.name}.`)
    onSignInError (error) {
      console.log('OH NOES', error)

.fb-signin-button {
  /* This is where you control how the button looks. Be creative! */
  display: inline-block;
  padding: 4px 8px;
  border-radius: 3px;
  background-color: #4267b2;
  color: #fff;

That's it!

Looking for the Google counterpart?


MIT © Phan An

Github Repository

Tags: #VueJs