> For the complete documentation index, see [llms.txt](https://docs.betterbugs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.betterbugs.io/developer-guide/betterbugs-web-sdk/installation/vue-app-example.md).

# Vue app example

### How to Install BetterBugs Feedback Widget in Vue apps

{% hint style="info" icon="lightbulb" %}
**PREREQUISITES**

Here’s what you need to set up the feedback widget:

* Vue app.
* Workspace-Wide API Key.
* BetterBugs Project API key.
  {% endhint %}

Here are the steps for it:

{% stepper %}
{% step %}

#### Generate API key and Project ID

Log in to your BetterBugs.io dashboard and generate API key and project ID from Workspace Settings. You’ll need it them initialize the feedback widget in the following steps.

[**Steps for Generating API Key and Project ID**](/developer-guide/betterbugs-web-sdk/installation.md)
{% 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@latest`
{% endtab %}

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

{% hint style="info" %}
Make sure to install `npm/yarn` package the latest **BetterBugs Web SDK version (0.0.44)**:
{% endhint %}
{% endstep %}

{% step %}

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

Use the following initialization code in your Vue app’s component. **Add your BetterBugs Workspace-Wide API key and Project ID 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({
      apiKey: "YOUR_API_KEY_HERE", // Workspace API key
      projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to
    });
    bbInstanceRef.value = instance;
  }
});

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

{% endstep %}

{% step %}

#### Customize the 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({
      apiKey: "YOUR_API_KEY_HERE", // Workspace API key
      projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to

      // 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 feedback 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 and project ID.&#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.