Vue Integration

Add FeedValue to your Vue.js application.

Installation

npm install @feedvalue/vue

Vue 3 Setup

Global Registration

// main.ts
import { createApp } from 'vue';
import { FeedValuePlugin } from '@feedvalue/vue';
import App from './App.vue';

const app = createApp(App);
app.use(FeedValuePlugin, {
  widgetId: 'wgt_abc123',
});
app.mount('#app');

Component Usage

<template>
  <div>
    <FeedValueWidget />
  </div>
</template>

<script setup>
import { FeedValueWidget } from '@feedvalue/vue';
</script>

Props

Prop	Type	Default	Description
widget-id	string	required	Your widget ID
position	string	'bottom-right'	Widget position
theme	string	'auto'	'light', 'dark', or 'auto'
primary-color	string	-	Custom primary color

Events

<template>
  <FeedValueWidget
    widget-id="wgt_abc123"
    @open="handleOpen"
    @close="handleClose"
    @submit="handleSubmit"
  />
</template>

<script setup>
const handleOpen = () => {
  console.log('Widget opened');
};

const handleClose = () => {
  console.log('Widget closed');
};

const handleSubmit = (feedback) => {
  console.log('Feedback:', feedback);
};
</script>

Composable

For programmatic control:

<script setup>
import { useFeedValue } from '@feedvalue/vue';

const { open, close, isOpen } = useFeedValue();
</script>

<template>
  <button @click="open">Give Feedback</button>
</template>

Nuxt 3

For Nuxt 3, create a plugin:

// plugins/feedvalue.client.ts
import { FeedValuePlugin } from '@feedvalue/vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(FeedValuePlugin, {
    widgetId: 'wgt_abc123',
  });
});

Then use in your layout:

<!-- layouts/default.vue -->
<template>
  <div>
    <slot />
    <ClientOnly>
      <FeedValueWidget />
    </ClientOnly>
  </div>
</template>

TIP

Use ClientOnly in Nuxt to prevent SSR hydration mismatches.