nomadboy20 / vue-facebook-login-component Goto Github PK

npm install --save vue-facebook-login-component

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

import VFacebookLogin from 'vue-facebook-login-component'

export default {
  components: {
    VFacebookLogin
  }
}

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

[ * ] - Properties should be camel-case.
[ ** ] - See Facebook for available values.
[ *** ] - Scope-component property.

[ * ] - Scope-component 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. See example:

<template>
  <v-facebook-login @sdk-init="handleSdkInit" />
  <button v-if="facebook.scope.logout" @click="facebook.scope.logout">
    Logout
  </button>
</template>

<script>
  export default = {
    data: () => ({
      facebook: {
        FB: {},
        scope: {},
      }
    }),
    methods: {
      handleSdkInit({ FB, scope }) {
        this.facebook.scope = scope
        this.facebook.FB = FB
      }
    }
  }
</script>

If props, slots and events do not satisfy your customization needs, 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, hence it has no added-value on its own. It only exposes a scoped-slot with attributes and methods that are committed as API.

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

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

This component embeds the Facebook SDK snippet, so you don't have to do it yourself. However, if you want to embed it yourself, you can do so and the component will pick up the SDK instance instead.

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 similar entry-point).

import 'regenerator-runtime'

// ...rest of your imports

Add babel-polyfill to your dependencies.

Fork, clone and use the following scripts.

For component:

npm start

For documentation (includes a demo):

npm run docs

Please open an issue for support.

Copyright (c) 2018 by MIT