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

# Vue.js

# Overview

Stigg's Vue SDK is a Javascript library for embedding self-service components in Vue 3 apps. It is based on [React SDK](/api-and-sdks/integration/frontend/react) components under the hood.

# Installing the SDK

Install the `@stigg/vue-sdk` package in your project using one of the below method:

### From npm:

<CodeGroup>
  ```shell shell theme={null}
  npm install @stigg/vue-sdk
  ```
</CodeGroup>

### From yarn:

<CodeGroup>
  ```shell shell theme={null}
  yarn add @stigg/vue-sdk
  ```
</CodeGroup>

# Retrieving the publishable key

In the Stigg app, go to **Integrations > API keys**.

Copy the **Publishable key** of the relevant environment.

# Getting started

Import the library's CSS styles:

<CodeGroup>
  ```typescript TypeScript theme={null}
  import '@stigg/vue-sdk/dist/style.css';
  ```
</CodeGroup>

Configure the SDK by wrapping your application in `StiggProvider`:

<CodeGroup>
  ```typescript Vue theme={null}
  <script setup lang="ts">
  import { StiggProvider, StiggProviderProps } from '@stigg/vue-sdk';

  const stiggProvider: StiggProviderProps = {
     apiKey: "<STIGG_PUBLISHABLE_KEY>",
  };

  </script>

  <template>
     <StiggProvider v-bind="stiggProvider">
        <NestedComponents />
     </StiggProvider>
  </template>
  ```
</CodeGroup>

# Rendering widgets

[Allow customers to select the plan that that they'd like to subscribe to from your public pricing page or in-app paywall](/documentation/snap-in-widgets/pricing-table)

[Introduce self-service and drive in-app expansions using only a few lines of codes](/documentation/snap-in-widgets/customer-portal)

[Easily accept payments without ever worrying about changes to your pricing model or migration to another billing provider](/documentation/snap-in-widgets/checkout)

# Example project

<Card title="stiggio/vue-react-sdk" icon="github" href="https://github.com/stiggio/vue-react-sdk" horizontal />

# Migrating to v7.0.0

Bumped `@stigg/react-sdk` to 9.0.0. All types are re-exported via `export type * from '@stigg/react-sdk'`, so the following breaking changes are inherited:

| Change                                                                                                              | Migration                                                                                    |
| ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| `entitlementsUpdated` event payload changed from `Map<string, CachedEntitlement>` to `CustomerEntitlementsResultV2` | Update listeners to iterate `.entitlements` (an `EntitlementV2[]` array) instead of a `Map`. |
| `EntitlementsState` type removed                                                                                    | Replace imports with `CustomerEntitlementsResult`.                                           |
| `getNumericEntitlement()` on a metered feature now returns a `FeatureTypeMismatch` fallback                         | Use `getMeteredEntitlement()` for metered features.                                          |
| `CreditEntitlementCurrency` named export removed                                                                    | Use `CreditEntitlement['currency']` inline type instead.                                     |

# SDK changelog

<Card title="Vue.js SDK changelog" icon="list-timeline" href="/api-and-sdks/changelog/frontend/vuejs" horizontal />