> ## Documentation Index
> Fetch the complete documentation index at: https://getfaceage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue

> Use Face Age in a Vue 2 or Vue 3 app — with the face-age SDK directly, or the vue-face-age and vue3-face-age wrappers.

## Use the SDK directly (recommended)

The [`face-age`](https://www.npmjs.com/package/face-age) SDK works in Vue without a wrapper, and gives you every option, API method and event in the [JavaScript SDK](https://getfaceage.com/docs/developer-guides/quickstart.md).

```bash theme={null}
npm install face-age
```

```vue theme={null}
<script setup>
import { onMounted } from 'vue';
import FaceAge from 'face-age';

onMounted(() => {
  const faceAge = new FaceAge({
    elementId: 'FaceAge-module',
    faceageId: '<Your Client ID>',
    showProducts: true,
    showRoutine: true,
  });

  faceAge.render();

  faceAge.onAddToCart((data) => {
    console.log('Add to cart:', data);
  });
});
</script>

<template>
  <div id="FaceAge-module"></div>
</template>
```

See [Configuration](https://getfaceage.com/docs/developer-guides/reference/configuration.md), [API reference](https://getfaceage.com/docs/developer-guides/reference/sdk-api.md) and [Events & analytics](https://getfaceage.com/docs/developer-guides/integrations/events.md).

## vue-face-age and vue3-face-age wrappers

> [!WARNING]
>
> The wrappers use the earlier options shown below and don't expose the newer SDK features. Use the SDK directly for new projects.

| Vue version | Package |
| - | - |
| Vue 2 | [`vue-face-age`](https://www.npmjs.com/package/vue-face-age) |
| Vue 3 | [`vue3-face-age`](https://www.npmjs.com/package/vue3-face-age) |

```bash Vue 2 theme={null}
npm install face-age vue-face-age
```

```bash Vue 3 theme={null}
npm install face-age vue3-face-age
```

Register the component and define your options (use `vue3-face-age` as the import for Vue 3):

```js theme={null}
import VueFaceAge from 'vue-face-age';

export default {
  components: {
    faceage: VueFaceAge,
  },
  data() {
    return {
      faceAgeOptions: {
        faceageId: '<Face Age Client Id>',
        type: 'skincare-analyzer',
      },
    };
  },
  methods: {
    onLoad(result) {
      console.log(result);
    },
  },
};
```

Then use it in your template:

```vue theme={null}
<template>
  <div class="demo">
    <faceage :options="faceAgeOptions" :onLoad="onLoad"></faceage>
  </div>
</template>
```

`onLoad` is called with the result after the analysis finishes.

### Wrapper options

**faceageId** `string` *required*

Your Face Age ID, from the **API keys** page of your business in the [panel](https://panel.getfaceage.com).

**type** `string` (default: skincare)

Display mode of the analysis:

* `skincare` — only collects the user's image.
* `skincare-analyzer` — collects the image and also displays the analysis results.

**access** `string[]`

Limit the analysis information that is displayed. Defaults to `['dark_circle', 'eye_bag', 'eye_wrinkles', 'deep_wrinkles', 'wrinkles', 'acnes', 'pores', 'pigment']`.

**showCamera** `boolean` (default: true)

Allow users to take a photo with the camera.

**showUpload** `boolean` (default: true)

Allow users to upload an image.

**showFacePoint** `boolean` (default: true)

Show the analysis points on the face.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.