Facebook Login error: 'FB' is not defined with Vue.js - vue.js

Question

I use Facebook Login in Vue-cli, but it shows 'FB' is not defined.
I separate the code in two files : application.js & app.vue
./assets/js/application.js
// Facebook Login
(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 = "https://connect.facebook.net/zh_TW/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
App.vue
mounted: function(){
window.fbAsyncInit = function() {
FB.init({
appId : '<appID>',
cookie : true,
xfbml : true,
version : '{api-version}'
});
FB.AppEvents.logPageView();
};
}
main.js
import './assets/js/application.js'
import App from './App.vue'

Answer 1

You do not have FB in your scope. You need to import it from the library you want to use, like
import { FB as VFacebookLogin } from 'vue-facebook-login-component'
I am not sure what library do you use. This one in my answer is from https://github.com/adi518/vue-facebook-login-component
UPDATE
You separate the code into two files, it can be a reason for the issue. The other reason can be that you do not wait until it will loads. So your mounted works before https://connect.facebook.net/zh_TW/sdk.js have been loaded.
Here is a good example of how it can be done:
https://github.com/adi518/vue-facebook-login-component/blob/master/src/modules/helpers.js#L7
https://github.com/adi518/vue-facebook-login-component/blob/master/src/modules/helpers.js#L27
https://github.com/adi518/vue-facebook-login-component/blob/master/src/components/FBLogin.Scope.js#L51
function initFbSdk(options) {
return new Promise(resolve => {
window.fbAsyncInit = function () {
const defaults = { cookie: true, xfbml: true }
options = { ...defaults, ...options }
window.FB.init(options)
resolve()
};
/* eslint-disable */
(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0]
if (d.getElementById(id)) { return; }
const js = d.createElement(s); js.id = id
js.src = '//connect.facebook.net/zh_TW/sdk.js'
fjs.parentNode.insertBefore(js, fjs)
}(document, 'script', 'facebook-jssdk'))
/* eslint-enable */
})
}
function getFbSdk(options) {
return new Promise(async resolve => {
if (window.FB) {
resolve(window.FB)
} else {
await initFbSdk(options)
resolve(window.FB)
}
})
}
Then you can use it as
const sdk = await getFbSdk({ appId, version, options }) //sdk === FB in this case