{"id":17864702,"url":"https://github.com/adi518/vue-facebook-login","last_synced_at":"2025-04-03T02:10:37.894Z","repository":{"id":40539481,"uuid":"142211327","full_name":"adi518/vue-facebook-login","owner":"adi518","description":"💅 A renderless Vue.js component for composing Facebook Login","archived":false,"fork":false,"pushed_at":"2021-12-21T04:10:02.000Z","size":37887,"stargazers_count":196,"open_issues_count":3,"forks_count":52,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-05T09:46:03.915Z","etag":null,"topics":["component","facebook","login","renderless","vue"],"latest_commit_sha":null,"homepage":"https://git.io/Jkhqf","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adi518.png","metadata":{"files":{"readme":"README-1.x.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-24T20:47:39.000Z","updated_at":"2024-11-10T17:23:03.000Z","dependencies_parsed_at":"2022-06-29T10:50:01.991Z","dependency_job_id":null,"html_url":"https://github.com/adi518/vue-facebook-login","commit_stats":null,"previous_names":["adi518/vue-facebook-login-component"],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adi518%2Fvue-facebook-login","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adi518%2Fvue-facebook-login/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adi518%2Fvue-facebook-login/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adi518%2Fvue-facebook-login/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adi518","download_url":"https://codeload.github.com/adi518/vue-facebook-login/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246922247,"owners_count":20855345,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","facebook","login","renderless","vue"],"created_at":"2024-10-28T09:15:03.699Z","updated_at":"2025-04-03T02:10:37.866Z","avatar_url":"https://github.com/adi518.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Install\n\n```console\nnpm install --save vue-facebook-login-component\n```\n\n## Usage\n\nTo use the component in your template, simply import and register with your component.\n\n### Script\n\n```js\nimport VFacebookLogin from 'vue-facebook-login-component'\n\nexport default {\n  components: {\n    VFacebookLogin\n  }\n}\n```\n\n### Template\n\n```html\n\u003cv-facebook-login app-id=\"966242223397117\"\u003e\u003c/v-facebook-login\u003e\n```\n\n## Props\n\n\u003cdiv id=\"props-table-wrap\" class=\"docs-table-wrap\"\u003e\n\n| Name               | Type    | Default                | Note                                                                                                                          |\n| ------------------ | ------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------- |\n| value              | Object  | `{ connected: false }` | Used for one-way V-Model. [ \u0026ast;\u0026ast;\u0026ast; ]                                                                                 |\n| app-id             | String  | None                   | Required. [ \u0026ast;\u0026ast;\u0026ast; ]                                                                                                 |\n| version            | String  | `'v3.1'`               | [ \u0026ast;\u0026ast;, \u0026ast;\u0026ast;\u0026ast; ]                                                                                               |\n| options            | Object  | `{}`                   | [ \u0026ast;, \u0026ast;\u0026ast;, \u0026ast;\u0026ast;\u0026ast; ]                                                                                        |\n| login-options      | Object  | `{ scope: 'email' }`   | [ \u0026ast;, \u0026ast;\u0026ast;, \u0026ast;\u0026ast;\u0026ast; ]                                                                                        |\n| button-style       | Object  | `{}`                   | [ \u0026ast; ]                                                                                                                     |\n| loader-style       | Object  | `{}`                   | [ \u0026ast; ]                                                                                                                     |\n| token-style        | Object  | `{}`                   | [ \u0026ast; ]                                                                                                                     |\n| text-style         | Object  | `{}`                   | [ \u0026ast; ]                                                                                                                     |\n| transition         | Array   | `[]`                   | Array of CSS transition values. Example:\u003cbr\u003e\u003cbr\u003e`[ 'background-color 0.15s ease-in-out', 'padding 0.15s ease-in-out', ... ]`. |\n| use-alternate-logo | Boolean | `false`                | Use [Iconmonstr alternate Facebook logo](https://iconmonstr.com/facebook-6-svg/).                                             |\n\n\u003c/div\u003e\n\n[ \u0026ast; ] - Properties should be camel-case.\u003cbr\u003e\n[ \u0026ast;\u0026ast; ] - See [Facebook](https://developers.facebook.com/docs/javascript/reference/FB.init/) for available values.\u003cbr\u003e\n[ \u0026ast;\u0026ast;\u0026ast; ] - Scope-component property.\n\n## Slots\n\n\u003cdiv id=\"slots-table-wrap\" class=\"docs-table-wrap\"\u003e\n\n| Name    | Default                                                         | Description                                                            |\n| ------- | --------------------------------------------------------------- | ---------------------------------------------------------------------- |\n| login   | `'Sign in with Facebook'`                                       |\n| logout  | `'Sign out with Facebook'`                                      |\n| working | `'Please wait...'`                                              |\n| logo    | [Iconmonstr Facebook 1](https://iconmonstr.com/facebook-1-svg/) | See [Iconmonstr](https://iconmonstr.com/?s=facebook) for more options. |\n| before  | `NONE`                                                          | Before all nested elements.                                            |\n| after   | `NONE`                                                          | After all nested elements.                                             |\n| error   | `'⛔ Network Error'`                                            | Shown on SDK load failure.                                             |\n\n\u003c/div\u003e\n\n## Events\n\n\u003cdiv id=\"events-table-wrap\" class=\"docs-table-wrap\"\u003e\n\n| Name     | Payload            | Description                                                                               | Note      |\n| -------- | ------------------ | ----------------------------------------------------------------------------------------- | --------- |\n| sdk-init | (sdk[Object])      | Returns an object with \u003cbr\u003e Facebook SDK instance and [`scope`](#-sdk-init-event) object. | [ \u0026ast; ] |\n| login    | (response[Object]) | User attempted login.                                                                     | [ \u0026ast; ] |\n| logout   | (response[Object]) | User attempted logout.                                                                    | [ \u0026ast; ] |\n| connect  | Boolean            | User is connected.                                                                        | [ \u0026ast; ] |\n| click    | None               | \u0026nbsp;                                                                                    | [ \u0026ast; ] |\n\n\u003c/div\u003e\n\n[ \u0026ast; ] - Scope-component event.\n\n### ⚠️ [Sdk-Init Event](#sdk-init-event)\n\nYou 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:\n\n```html\n\u003ctemplate\u003e\n  \u003cv-facebook-login @sdk-init=\"handleSdkInit\" /\u003e\n  \u003cbutton v-if=\"facebook.scope.logout\" @click=\"facebook.scope.logout\"\u003e\n    Logout\n  \u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default = {\n    data: () =\u003e ({\n      facebook: {\n        FB: {},\n        scope: {},\n      }\n    }),\n    methods: {\n      handleSdkInit({ FB, scope }) {\n        this.facebook.scope = scope\n        this.facebook.FB = FB\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n## Scope component (Advanced Customization)\n\nIf 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.\n\n### Props/Events\n\nRefer to the [tables](#props-table-wrap) above for scope-component **specific** props/events.\n\n### Scoped-Slot Scope (Attributes and Methods)\n\n\u003cdiv id=\"scope-table-wrap\" class=\"docs-table-wrap\"\u003e\n\n| Name         | Type     | Description                                                |\n| ------------ | -------- | ---------------------------------------------------------- |\n| login        | Function | Login handler.                                             |\n| logout       | Function | Logout handler.                                            |\n| toggleLogin  | Function | Toggles login/logout.                                      |\n| working      | Boolean  | SDK-initialization/login/logout is currently taking place. |\n| connected    | Boolean  | User is logged in.                                         |\n| disconnected | Boolean  | User is logged out.                                        |\n| enabled      | Boolean  | Button is enabled.                                         |\n| disabled     | Boolean  | Button is disabled.                                        |\n\n\u003c/div\u003e\n\n### Scope component example (for a full example see [source](https://github.com/adi518/vue-facebook-login-component/blob/master/src/components/FBLogin.vue)).\n\n```html\n\u003ctemplate\u003e\n  \u003cv-facebook-login-scope\u003e\n    \u003c!-- Compose HTML/CSS here, otherwise nothing will be rendered --\u003e\n    \u003cbutton slot-scope=\"scope\"\u003e\n      \u003c!-- Compose with `scope` here --\u003e\n    \u003c/button\u003e\n  \u003c/v-facebook-login-scope\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { VFBLoginScope } from 'vue-facebook-login-component'\n\n  export default {\n    components: {\n      VFBLoginScope\n    }\n  }\n\u003c/script\u003e\n```\n\n## Loading Facebook SDK\n\nThis component embeds the [Facebook SDK snippet](https://developers.facebook.com/docs/javascript/quickstart/), 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.\n\n## \"Uncaught ReferenceError: regeneratorRuntime is not defined\"\n\nThis package uses `async/await` syntax, which is based on [generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators). In short, if you target you'll have to add [regenerator-runtime](https://github.com/facebook/regenerator/tree/master/packages/regenerator-runtime) to your dependencies. See this [issue](https://github.com/adi518/vue-facebook-login-component/issues/17) for more details.\n\n```console\nnpm install --save regenerator-runtime\n```\n\nThen, import it at the topmost of your `main.js` (or a similar entry-point).\n\n```js\nimport 'regenerator-runtime/runtime'\n\n// ...rest of your imports\n```\n\n## IE support\n\nAdd [babel-polyfill](https://babeljs.io/docs/en/babel-polyfill) to your dependencies.\n\n## Development\n\nFork, clone and use the following scripts.\n\nFor component:\n\n```console\nnpm start\n```\n\nFor documentation (includes a demo):\n\n```console\nnpm run docs\n```\n\n## Support\n\nPlease open an [issue](https://github.com/adi518/vue-facebook-login-component/issues) for support.\n\n## License\n\nCopyright (c) 2018 by [MIT](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadi518%2Fvue-facebook-login","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadi518%2Fvue-facebook-login","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadi518%2Fvue-facebook-login/lists"}