> For the complete documentation index, see [llms.txt](https://docs.accurascan.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.accurascan.com/language/web-plugin/face-plugin/vue.md).

# Vue

## Accura Face Plugin — Vue 3 Integration Guide

This guide walks you through integrating the **Accura Face Plugin** into a Vue 3 project built with Vite.

***

### Prerequisites

Before proceeding, ensure the following requirement is met:

* **`accura.xml`** — Place your `accura.xml` license file in the **`public/`** folder of your project as `public/accura.xml`. This file is required by the plugin to initialize the face detection engine. You can download it from here.

{% file src="/files/bOBUket0GHd3RpNHJvnv" %}

***

### Step 1: Initialize Project

If you do not have an existing Vue 3 project, scaffold one using Vite:

```bash
npm create vite@latest my-face-app -- --template vue
cd my-face-app
npm install
```

***

### Step 2: Install Plugin

Install the Accura Face Plugin package from the npm registry:

```bash
npm install accurafaceplugin
```

***

### Step 3: Implementation

Create a dedicated scanner component at `components/FaceScanner.vue`. The following snippet shows only the **plugin import and initialization** logic:

```vue
<script setup>
import { onMounted, onUnmounted } from 'vue';

let plugin = null; // Holds the active plugin instance for lifecycle management

onMounted(async () => {
  // Dynamically import the plugin inside onMounted to guarantee browser-only execution.
  // Vue's onMounted lifecycle hook runs exclusively on the client side,
  // making it safe to access browser APIs such as the camera.
  const { default: FacePlugin } = await import('accurafaceplugin');

  // Instantiate the plugin with:
  //   1. The file path (served from public/)
  //   2. The capture callback invoked on successful face detection
  //   3. A configuration object for UI and detection tuning
  plugin = new FacePlugin(
    "/accura.xml",   // Resolves to public/accura.xml at runtime
    base64Handler,   // Fired automatically when the plugin captures a face
    {
      threshold: 3,       // Detection sensitivity (1–100; higher = stricter)
      textSize: "",       // Overlay text size (default if empty)
      textColor: "",      // Overlay text color (default if empty)
      textWeight: "",     // Overlay font weight (default if empty)
      textBgColor: "",    // Overlay background color (default if empty)
      BodyBgColor: "",    // Viewport background color (default if empty)
    }
  );

  // Activate the camera and begin the face detection session.
  await plugin.start();
});

// Release camera resources and destroy the plugin instance when the component unmounts.
onUnmounted(() => {
  if (plugin) {
    plugin.destroy();
  }
});
</script>
```

***

### Step 4: Response Handling

When the plugin captures a valid face, it invokes the **`base64Handler`** callback with an object containing a `base64` property — a Data URL string representing the captured face image encoded in Base64 format (e.g., `data:image/jpeg;base64,/9j/...`).

**What is Base64?** Base64 is a binary-to-text encoding scheme that converts raw binary image data into a sequence of printable ASCII characters. The prefix segment (e.g., `data:image/jpeg;base64,`) conveys the MIME type, while the remainder is the encoded image payload. This format enables safe and seamless transmission over text-based HTTP protocols without requiring binary transfer mechanisms.

The following handler demonstrates forwarding the image to a remote verification endpoint:

```js
// Automatically invoked by the plugin upon a successful face capture event.
// Receives: { base64 } — a complete Data URL of the captured face image.
const base64Handler = async ({ base64 }) => {
    console.log("Base64 received:", base64);

    try {
        // Construct a multipart form payload for HTTP transmission.
        const formData = new FormData();

        // Attach the base64 string under the field key expected by your backend.
        formData.append("imagebase64", base64);

        // Dispatch the verification request to your server endpoint.
        // Replace the URL with your actual backend host and path.
        const response = await fetch("https://ip:port/upload.php", {
            method: "POST",
            body: formData,
        });

        // Parse the JSON response returned by the verification server.
        const data = await response.json();
        console.log("API Response:", data);

        // Read the liveness/match confidence score from the response payload.
        if (data && data.score !== undefined) {
            console.log(`Score: ${data.score}`);
        }
    } catch (error) {
        console.error("Error sending to API:", error);
    }
};
```

***

### Step 5: Demo Implementation

The following is the **complete, production-ready component**. Copy and paste it directly into `components/FaceScanner.vue`. The original logic is preserved exactly as-is.

```vue
<template>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

const isReady = ref(false);
let plugin = null;

onMounted(async () => {
  try {
    const { default: FacePlugin } = await import('accurafaceplugin');

    const base64Handler = async ({ base64 }) => {
        console.log("Base64 received:", base64);

        try {
            const formData = new FormData();
            formData.append("imagebase64", base64);

            const response = await fetch(
                "https://ip:port/upload.php",
                {
                    method: "POST",
                    body: formData,
                },
            );

            const data = await response.json();
            console.log("API Response:", data);

            // Display the score on UI
            if (data && data.score !== undefined) {
                console.log(`Score: ${data.score}`);
            }
        } catch (error) {
            console.error("Error sending to API:", error);
        }
    };
    
    plugin = new FacePlugin(
      "/accura.xml",
      base64Handler,
      {
        threshold: 3,
        textSize: "",
        textColor: "",
        textWeight: "",
        textBgColor: "",
        BodyBgColor: "",
      }
    );
    
    await plugin.start();
    isReady.value = true;
  } catch (error) {
    console.error("Plugin failed to start:", error);
  }
});

onUnmounted(() => {
  if (plugin) {
    plugin.destroy();
  }
});
</script>

<style scoped>

</style>
```

***

### Step 6: Usage

Import and use the component in `App.vue`:

```vue
<script setup>
import FaceScanner from './components/FaceScanner.vue';
</script>

<template>
  <FaceScanner />
</template>
```

***

### Step 7: Running the Project

```bash
npm run dev
```