Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Where to Vue.use custom component on Quasar Framework? – Facebook api

I tried to use https://github.com/phanan/vue-facebook-signin-button component on Quasar Framework, I’ve installed it using npm:

npm i vue-facebook-signin-button --save

I’ve put on main.js:

import FBSignInButton from 'vue-facebook-signin-button'
Vue.use( FBSignInButton ) // use facebook signin button

Then I’ve add on main .vue file: 

<template>
  <q-layout>
    <div class="layout-view">
      <fb-signin-button
        :params="fbSignInParams"
        @success="onFbSignInSuccess"
        @error="onFbSignInError">
        Sign in with Facebook
      </fb-signin-button>
    </div>
   </q-layout>
 </template>
<script>
  // Facebook
  var FB;
  window.fbAsyncInit = function() {
    FB.init( {
      appId: process.env.FB_APPID,
      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' ))

  export default {
    store,
    data () {
      return {
        fbSignInParams: {
          scope: '',
          return_scopes: true
        }
      }
    },
    computed: {},
    methods: {
      onFbSignInSuccess ( response ) {
        console.log( 'res', response )
        FB.api( '/me', dude => {
          console.log( 'dude', dude )
          console.log( `Good to see you, ${dude.name}.` )
        } )
      },
      onFbSignInError ( error ) {
        console.log( 'OH NOES', error )
      }
    }
  }
</script>

But it gives an runtime error:

(unknown) [Vue warn]: Unknown custom element: <fb-signin-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Index> at /home/asd/SPA/src/components/Index.vue
       <App> at /home/asd/SPA/src/App.vue
         <Root>

And another error on fbAsyncInit:

sdk.js:96 Uncaught TypeError: Cannot read property 'init' of undefined
    at window.fbAsyncInit (eval at <anonymous> (0.6374f77….js:243), <anonymous>:10:5)
    at v.__wrapper (sdk.js:96)
    at sdk.js:140
Tags:

2

Answers


  1. 0

    This error occurs whenever there is an unidentified html tag which is not registered a vue component.
    One solution to this problem is to create a vue wrapper of fb login button and implement the functionality.

    Go through this link once.

    Sample Code

    Login or Signup to reply.
  2. 0

    FBSignInButton is a Vue component, so what you need to do is to import it and add it to your component like this:

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

export default {
   ...,
   components: {
     ...,
     FBSignInButton
   },
   ...
}

    You need to declare it as a component, otherwise Vue will not know about it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search