TG-Inspector Vue 3 Plugin

A Vue 3 plugin with Quasar components that provides runtime inspection capabilities for your applications.

Features

• 🔍 Component Inspector: Real-time inspection of component props and state
• 📊 Event Logging: Track and log component events
• 🎨 Quasar UI: Beautiful Quasar-based interface
• 🌓 Theme Support: Light and dark theme options
• 📱 Responsive: Works on desktop and mobile
• 🔌 Plugin Architecture: Easy to integrate into existing projects
• 🎯 Shared Konva Instance: Access to the global Konva instance and all stages

Installation

npm install tg-inspector konva vue-konva

Note: konva and vue-konva are peer dependencies and must be installed alongside the tg-inspector plugin.

Usage

Basic Setup

import { createApp } from 'vue';
import { Quasar } from 'quasar';
import InspectorPlugin from 'tg-inspector';

const app = createApp(App);

// Configure Quasar
app.use(Quasar, {
  plugins: {},
});

// Configure TG-Inspector Plugin
app.use(InspectorPlugin, {
  theme: 'light',
  position: 'top-right',
  debug: true,
});

app.mount('#app');

In Your Components

<template>
  <div>
    <!-- Your component content -->

    <!-- Add Inspector -->
    <Inspector :props="componentProps" :state="componentState" ref="inspectorRef" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const inspectorRef = ref();
const counter = ref(0);

const componentProps = computed(() => ({
  counter: counter.value,
}));

const componentState = computed(() => ({
  counter: counter.value,
  timestamp: new Date().toISOString(),
}));

const increment = () => {
  counter.value++;
  // Log the event
  inspectorRef.value?.logEvent('increment', { newValue: counter.value });
};
</script>

Configuration Options

| Option | Type | Default | Description | | ---------- | -------------------------------------------------------------- | ------------- | -------------------- | | theme | 'light' \| 'dark' | 'light' | Inspector theme | | position | 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' | 'top-right' | Inspector position | | debug | boolean | false | Enable debug logging |

API

Inspector Component Props

• props - Object containing component props to inspect
• state - Object containing component state to inspect
• target - Direct reference to a component instance

Inspector Component Methods

• logEvent(eventName: string, payload?: any) - Log a custom event
• toggleExpanded() - Toggle the expanded state

Konva Integration

The tg-inspector plugin provides access to the shared Konva instance used by vue-konva:

import { Konva, KonvaInstance } from 'tg-inspector';

// Access all stages created in your application
console.log('All Konva stages:', Konva.stages);

// Get a specific stage
const stage = Konva.stages.find((s) => s.id() === 'my-stage');

// Listen for global Konva events
Konva.on('stageCreated', (stage) => {
  console.log('New stage created:', stage);
});

For detailed examples, see Konva Shared Usage Examples.

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build:lib

# Build playground
npm run build

License

MIT