MicroFeedback Vue SDK

Vue SDK for embedding MicroFeedback widgets into Vue applications.

Installation

npm install microfeedback-vue
# or
yarn add microfeedback-vue
# or
bun add microfeedback-vue

Usage

Vue 3 with Composition API

<template>
  <div>
    <MicroFeedbackWidget
      api-key="mk_dev_abc123"
      widget-id="widget_xyz789"
      theme="auto"
      position="bottom-right"
      @load="onWidgetLoad"
      @submit="onFeedbackSubmit"
      @error="onWidgetError"
    />
  </div>
</template>

<script setup>
import { MicroFeedbackWidget } from 'microfeedback-vue'

const onWidgetLoad = () => {
  console.log('Widget loaded successfully')
}

const onFeedbackSubmit = (data) => {
  console.log('Feedback submitted:', data)
}

const onWidgetError = (error) => {
  console.error('Widget error:', error)
}
</script>

Global Plugin Registration

import { createApp } from 'vue'
import { MicroFeedbackPlugin } from 'microfeedback-vue'
import App from './App.vue'

const app = createApp(App)

app.use(MicroFeedbackPlugin, {
  apiKey: 'mk_dev_abc123',
  theme: 'auto',
  baseUrl: 'https://api.microfeedback.com'
})

app.mount('#app')

Using Composables

<script setup>
import { ref } from 'vue'
import { useMicroFeedback } from 'microfeedback-vue'

const containerRef = ref()

const { isLoaded, isVisible, error, show, hide } = useMicroFeedback(containerRef, {
  apiKey: 'mk_dev_abc123',
  widgetId: 'widget_xyz789',
  onLoad: () => console.log('Loaded'),
  onSubmit: (data) => console.log('Submitted:', data)
})
</script>

<template>
  <div>
    <div ref="containerRef"></div>
    <button @click="show" :disabled="!isLoaded">Show Widget</button>
    <button @click="hide" :disabled="!isLoaded">Hide Widget</button>
  </div>
</template>

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | apiKey | string | Yes | - | API key for authentication | | widgetId | string | Yes | - | Widget identifier | | theme | "light" \| "dark" \| "auto" | No | "auto" | Theme preference | | position | "bottom-right" \| "bottom-left" \| "top-right" \| "top-left" | No | "bottom-right" | Widget position | | baseUrl | string | No | - | Base URL for the embed API | | initiallyVisible | boolean | No | true | Whether widget should be initially visible |

Events

| Event | Payload | Description | |-------|---------|-------------| | load | - | Emitted when widget loads successfully | | error | EmbedError | Emitted when an error occurs | | submit | { feedback: string } | Emitted when feedback is submitted | | show | - | Emitted when widget is shown | | hide | - | Emitted when widget is hidden |

Vue 2 Support

This package supports both Vue 2.6+ and Vue 3. The appropriate component version is automatically selected based on your Vue version.

TypeScript Support

Full TypeScript support is included with proper type definitions for all components, composables, and events.