---
title: "Integrating Brainfish Widgets with Vue"
description: "1. Install the Brainfish Dependency"
canonical_url: "https://help.brainfi.sh/articles/integrating-brainfish-widgets-with-vue-Hxftjzoajs"
md_url: "https://help.brainfi.sh/articles/integrating-brainfish-widgets-with-vue-Hxftjzoajs.md"
---
# Integrating Brainfish Widgets with Vue

### 1. **Install the Brainfish Dependency**

Install the Brainfish library in your Vue project using npm:

```bash
npm install @brainfish-ai/web-widget
```

### 2. **Create the Search Widget Component**

Create a file named `BrainfishSearch.vue` and add the following code:

```javascript
<template>
  <!-- Custom HTML element for the Brainfish search widget -->
  <brainfish-search-widget :class="className"></brainfish-search-widget>
</template>

<script>
import { onMounted } from 'vue';
import Brainfish from '@brainfish-ai/web-widget';

export default {
  setup() {
    // Initialize the Brainfish search widget after the component is mounted
    onMounted(() => {
      Brainfish.Widgets.init({
        widgetKey: 'YOUR_WIDGET_KEY', // Replace with your unique widget key
      });
    });

    // Class name for styling purposes
    const className = 'custom-class';
    return { className };
  },
};
</script>
```

### 3. **Create the SlideOver Widget Component**

Create a file named `BrainfishSlideOver.vue` and add the following code:

```javascript
<template>
  <!-- Button to trigger the Brainfish help widget -->
  <button class="brainfish-trigger-button" @click="openHelpWidget">Help</button>
</template>

<script>
import { onMounted } from 'vue';
import Brainfish from '@brainfish-ai/web-widget';

export default {
  setup() {
    // Initialize the Brainfish widget after the component is mounted
    onMounted(() => {
      Brainfish.Widgets.init({
        widgetKey: 'YOUR_WIDGET_KEY', // Replace with your unique widget key
      });
    });
  },
};
</script>
```

### Notes

* `widgetKey`: Replace `'YOUR_WIDGET_KEY'` with your actual widget key provided by Brainfish.
* **Styling**: Use the `:class` binding to apply custom styles to the search widget.