Vue 3 facebook login

Demo

Demo and docs

Installation

Prerequisites

• Node.js version 16 or higher.
• Text Editor.
  • VSCode is recommended, along with the official Vue extension.

To get started, you can install vue3-facebook-login with:

npm i @healerlab/vue3-facebook-login

with pnpm:

pnpm add @healerlab/vue3-facebook-login

with yarn:

yarn add @healerlab/vue3-facebook-login

Usage

See the FaceBook Graph API for more information about scope.

Import the component and register it locally in your Vue component:

<script setup>
import { HFaceBookLogin } from '@healerlab/vue3-facebook-login';

const onSuccess = (response) => {
  // get your auth token and info
}

const onFailure = () => {
  // logic if auth failed
}
</script>

Use the component in your template:

<HFaceBookLogin 
  v-slot="fbLogin" 
  app-id="391069538168549" 
  @onSuccess="onSuccess" 
  @onFailure="onFailure"
  scope="id,name,email,first_name,last_name,birthday"
>
  <span @click="fbLogin.initFBLogin" class="fb-button">Login with facebook</span>
</HFaceBookLogin>

This is style for this example and not required, you can change and customize it to match your use-case:

.fb-button {
  display: inline-block;
  margin: 10px 0 10 0;
  color: white;
  background-color: #1967d2;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
}

See the Vue3 FaceBook Login page for more information.