A renderless Vue.js component for composing Facebook login.
npm install vue-facebook-login-componentyarn add vue-facebook-login-componentnpm install vue-facebook-login-component-nextyarn add vue-facebook-login-component-next<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.
To use the component in your template, simply import and register with your component.
<template>
<v-facebook-login app-id="966242223397117"></v-facebook-login>
</template>
<script>
import VFacebookLogin from 'vue-facebook-login-component'
export default {
components: {
VFacebookLogin,
},
}
</script>7.85 KiB).3.6 KiB).rem sizing.See JS Fiddle for a vanilla example.
[ * ] - Scope component 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.
[ * ] - 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.
⚠️ The scope reference is not reactive and you cannot relay on it for other than utilizing the scope methods. For reactivity, use the
v-modeldirective.
<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>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.
Refer to the tables above for scope component specific props/events.
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>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.
This component renders on the client-side only. To do that, you have to complete a few steps.
nuxt.config.js for HTTPS.<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>🧡 Mind breaking changes from
3.xto2.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
❤️ 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.
💚 TL;DR: Upgrade to
2.xto 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.
Fork, clone and use the following scripts.
yarn startyarn start:docsyarn testPlease search existing issues (including closed ones) before starting a new issue. 🙌
Start a pull request, run tests and update as necessary before submitting.
Copyright (c) 2020 by MIT