# Vue app example

### How to install BetterBugs Web SDK in Vue apps

{% hint style="success" %}
Check out the [**GitHub repo** for the Vue example app ](https://github.com/betterbugs/web-sdk/tree/main/examples/02-Vue-app-example)covered here.
{% endhint %}

Here are the steps for it:

{% stepper %}
{% step %}

#### Generate API key

Log in to your BetterBugs dashboard and generate an API key from Workspace Settings. You’ll need it to initialize the SDK in the following steps.

[Steps for generating API key](https://docs.betterbugs.io/developer-guide/betterbugs-web-sdk/installation)
{% endstep %}

{% step %}

#### Install BetterBugs Web SDK using npm/yarn

In your Vue project’s root terminal, run the following command to install the SDK files in your application using npm or yarn. **We’ve used npm for this demo setup**.

{% tabs %}
{% tab title="npm" %}
`npm install @betterbugs/web-sdk`
{% endtab %}

{% tab title="yarn" %}
`yarn add @betterbugs/web-sdk`
{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### Initialize the SDK (with default UI)

Use the following initialization code in your Vue app’s component. **Add your BetterBugs project API key to the code**.

```javascript
<!-- Vue Template -->
<template>
  <h1>BetterBugs Web SDK Widget | Vue</h1>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from "vue";

const bbInstanceRef = ref(null);

onMounted(async () => {
  if (typeof window !== "undefined") {
    const { default: Betterbugs } = await import("@betterbugs/web-sdk");
    const instance = new Betterbugs({
      // Replace with your BetterBugs Project API Key
      apiKey: "YOUR-API-KEY-GOES-HERE",
    });
    bbInstanceRef.value = instance;
  }
});

onBeforeUnmount(() => {
  bbInstanceRef.value?.destroy?.();
});
</script>
```

{% endstep %}

{% step %}

#### Customize the SDK widget UI (Optional)

You can customize the SDK with your brand colors and design from the initialization function:

```javascript
<!-- Vue Template -->
<template>
  <h1>BetterBugs Web SDK Widget | Vue</h1>
</template>

<script setup>
// BetterBugs SDK Initialization Code
import { onMounted, onBeforeUnmount, ref } from "vue";

const bbInstanceRef = ref(null);

onMounted(async () => {
  if (typeof window !== "undefined") {
    const { default: Betterbugs } = await import("@betterbugs/web-sdk");
    const instance = new Betterbugs({
      // Replace with your BetterBugs Project API Key
      apiKey: "YOUR-API-KEY-GOES-HERE",

      // UI Customization Examples
      position: {
        top: "30px",
        right: "20px",
      },
      styles: {
        primaryColor: "#e41c38",
        primaryTextColor: "#fff",
        theme: "light",
      },
    });
    bbInstanceRef.value = instance;
  }
});

onBeforeUnmount(() => {
  bbInstanceRef.value?.destroy?.();
});
</script>
```

{% endstep %}

{% step %}

#### Test the setup

To test the setup, run your local dev server (**<http://localhost:5173/>**) with the following command (or with the one that you might be using):

```javascript
npm run dev
```

{% endstep %}
{% endstepper %}

The Web SDK widget should be available at the bottom right side of your app screen (**with the default UI**).

{% hint style="warning" %}
**NOTE**: If the widget is not visible,&#x20;

* Please check if you’ve correctly entered the API key.&#x20;
* Check for the console errors, if any.&#x20;
* If you’re still stuck, try running your dev server in the INCOGNITO mode of your web browser. &#x20;
* Some ad blockers or extensions may also prevent the Widget from running. Please turn them off and try running the application again. It should work fine.
  {% endhint %}

You're good to go.