Buggy Reporter for Vue 3

A floating bug reporting widget for Vue 3 applications. Capture screenshots, screen recordings, and browser state with ease.

Features

• Floating widget that stays out of the way.
• Report bugs with name, description, and expected functionality.
• Capture screenshots of the current page.
• Record the current browser tab.
• Automatically captures localStorage state.
• View, edit, and delete submitted reports.
• Export all reports to a ZIP file including an Excel summary, screenshots, videos, and state.

Installation

npm install @nic-tech-labs-admin/buggy-reporter

Peer Dependencies

This library requires you to install and configure its peerDependencies in your host project.

This library bundles its own dependencies like Dexie.js and Font Awesome. You only need to have vue and vue-router in your project.

Usage

In your main application entry file (e.g., main.ts or main.js):

import { createApp } from 'vue';
import App from './App.vue';
// 1. Import the library and its CSS. Font Awesome icons are automatically registered.
import BuggyReporter from '@nic-tech-labs-admin/buggy-reporter'
import '@nic-tech-labs-admin/buggy-reporter/dist/style.css'

const app = createApp(App)

// 2. Install the BuggyReporter plugin
app.use(BuggyReporter)

app.mount('#app')

The component will now be available in your application. It injects itself into the page and does not require you to add <BuggyReporter /> to your templates.