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

# Vue

> Integrate the Encore Web SDK in a Vue 3 app: configure() in the root component's onMounted, identify() on login, show() from event handlers.

The SDK is framework-agnostic — in Vue you call it directly. Configure once when the root
component mounts, then present offers from event handlers.

## Install

```bash theme={null}
npm install @encorekit/web-sdk
```

## Configure on mount

```vue theme={null}
<!-- App.vue -->
<script setup lang="ts">
import { onMounted } from 'vue';
import Encore from '@encorekit/web-sdk';

onMounted(() => {
  Encore.configure({ apiKey: import.meta.env.VITE_ENCORE_API_KEY });
});
</script>
```

`configure()` honors only its first successful call — full options in the
[`configure()` reference](/publishers/web/sdk-reference/configure).

## Identify and present offers

```vue theme={null}
<script setup lang="ts">
import Encore from '@encorekit/web-sdk';

// After login:
Encore.identify(user.id); // replaces the auto-generated anonymous UUID

async function onCancelClicked() {
  const result = await Encore.placement('cancel_flow').show(); // never rejects
  if (result.status !== 'claimed') {
    proceedWithCancellation(); // 'dismissed' or 'unavailable' — continue your flow
  }
}
</script>

<template>
  <button @click="onCancelClicked">Cancel subscription</button>
</template>
```

## Next steps

* [Redemption Modes](/publishers/web/guides/redemption-modes) — deferred vs immediate claim flows
* [Thank-You Layout](/publishers/web/guides/thank-you-layout) — post-purchase placements
* [`show()`](/publishers/web/sdk-reference/show) — the full `ShowResult` contract