Vue Audit Table

A lightweight Vue 3 component for displaying audit trail differences between old and new values with a clean, color-coded table interface.

Features

• 🎨 Clean, color-coded diff visualization
• 🌙 Built-in dark & light mode via theme prop
• 🔍 Deep object comparison with nested structure support
• 📦 Lightweight with zero dependencies (except Vue 3)
• 🎯 TypeScript support
• ⚡ Works with Vue 3, Nuxt 3, Nuxt 4, and Vite projects
• 🔄 Fully reactive: updates automatically on prop changes
• 🖌️ Customizable colors via colors object

Installation

npm install vue-audit-table

Usage

Basic (light theme)

<script setup>
  import AuditTable from 'vue-audit-table'
  import 'vue-audit-table/style.css'

  const oldValue = { name: 'John', age: 30, city: 'New York' }
  const newValue = { name: 'John', age: 31, city: 'Los Angeles', email: '[email protected]' }
</script>

<template>
  <AuditTable :old-value="oldValue" :new-value="newValue" />
</template>

Dark mode

<AuditTable :old-value="oldValue" :new-value="newValue" theme="dark" />

Custom color overrides

<AuditTable
  :old-value="oldValue"
  :new-value="newValue"
  theme="dark"
  :colors="{ old: '#7c2d2d', new: '#14532d', border: '#6366f1' }"
/>

Props

| Prop | Type | Default | Description | |------------|---------------------------|-----------|--------------------------------------------------| | oldValue | Record<string, any> | required | The original object before changes | | newValue | Record<string, any> | required | The updated object after changes | | theme | 'light' \| 'dark' | 'light' | Built-in color theme | | colors | AuditTableColors | {} | Optional overrides on top of the selected theme |

AuditTableColors interface

interface AuditTableColors {
  unchanged?: string  // background for unchanged rows  (default light: #ffffff  / dark: #1e2130)
  old?:       string  // background for old/deleted rows (default light: #ffd6d6 / dark: #4a1e1e)
  new?:       string  // background for new/added rows   (default light: #d4edda / dark: #1a3a28)
  border?:    string  // cell border color               (default light: #cccccc / dark: #374151)
  text?:      string  // cell text color                 (default light: #111111 / dark: #e2e8f0)
}

Color Legend

| Color | Meaning | |--------|-----------------------------| | 🟥 Red | Old / deleted values | | 🟩 Green | New / added values | | ⬜ White / dark surface | Unchanged values |

What it detects

• ✅ Added fields
• ❌ Removed fields
• 🔄 Modified values
• 📊 Nested object changes
• 📋 Array differences

License

MIT

Author

Ivan Kelava

Repository

GitHub