@opto-code/nuxt-dev-console NPM

@opto-code/nuxt-dev-console

A powerful development console for Nuxt 3 applications that provides real-time monitoring, advanced logging, filtering, and debugging capabilities with zero production overhead.

View Demo · Report Bug · Request Feature

✨ Features

🎯 Core Features

Interactive console interface with customizable positioning and dimensions
Real-time log monitoring and filtering
Advanced search capabilities with search history
Log persistence with intelligent storage management
Support for log groups and collapsible entries
Multiple export formats (JSON, CSV, TXT)

🔍 Log Management

Automatic log persistence between page reloads
Intelligent quota management for localStorage
Configurable maximum log history
Log grouping and nesting support
Copy-to-clipboard functionality
Virtual scrolling for optimal performance

🎨 Visual Features

Three theme modes (dark/light/system) with custom theme support
Customizable position (top-right, top-left, bottom-right, bottom-left)
Resizable console window
Color-coded log levels
Tag visualization and filtering
Collapsible log entries

📦 Installation

# npm
npm install @opto-code/nuxt-dev-console

# yarn
yarn add @opto-code/nuxt-dev-console

# pnpm
pnpm add @opto-code/nuxt-dev-console

🚀 Quick Setup

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@opto-code/nuxt-dev-console'],
  devConsole: {
    enabled: true
  }
})

Add the console component to your app:

<template>
  <div>
    <!-- Your app content -->
    <DevConsole />
  </div>
</template>

🔧 Configuration

Basic Configuration

export default defineNuxtConfig({
  modules: ['@opto-code/nuxt-dev-console'],
  devConsole: {
    // Basic settings
    enabled: true,
    allowProduction: false,

    // Visual Configuration
    position: 'bottom-right',
    theme: 'dark',
    height: 600,
    width: 800,

    // Functionality
    maxLogHistory: 1000,
    queueSize: 1000,
    flushInterval: 100
  }
})

Advanced Configuration

See our Configuration Guide for detailed options.

📖 Usage

Basic Logging

// Automatic console method capture
console.log('Hello World')
console.info('Server started', { port: 3000 })
console.warn('Deprecated feature used')
console.error('Connection failed', new Error('Timeout'))

// Using the global logger
const { $devLogger } = useNuxtApp()
$devLogger.log('Hello from dev logger')

Tagged Logging

// Get console reference
const devConsole = ref(null)

// Log with tags for better organization
devConsole.value?.logWithTags(['user', 'auth'], 'User logged in', { userId: 123 })
devConsole.value?.errorWithTags(['api', 'error'], 'API failed', new Error('Network error'))
devConsole.value?.warnWithTags(['perf'], 'Slow operation', { latency: '500ms' })

Log Groups

// Create collapsible groups
console.group('API Requests')
console.log('GET /api/users')
console.log('POST /api/data')
console.groupEnd()

// Collapsed by default
console.groupCollapsed('Performance Metrics')
console.log('Load time: 1.2s')
console.log('First paint: 0.8s')
console.groupEnd()

Export Functionality

// Export logs programmatically
window.$devLogger.exportLogs()         // JSON format
window.$devLogger.exportLogs('csv')    // CSV format
window.$devLogger.exportLogs('txt')    // Text format

⌨️ Keyboard Shortcuts

Shortcut	Action
`ctrl+shift+d`	Toggle console visibility
`ctrl+l`	Clear console
`ctrl+f`	Focus search bar
`esc`	Close console

🎨 Theme Customization

devConsole: {
  theme: 'dark',
  customTheme: {
    dark: {
      background: '#1a1a1a',
      text: '#ffffff'
    },
    light: {
      background: '#ffffff',
      text: '#000000'
    }
  }
}

📚 Best Practices

Log Organization

Use consistent tag naming across your application
Combine broad and specific tags for better filtering
Include relevant data objects with your logs
Use log groups for related operations
Add timestamps for time-sensitive operations

Performance

Configure appropriate maxLogHistory for your needs
Regularly clear old logs to maintain performance
Use tag filtering to focus on relevant information
Export logs for long-term storage or analysis

Development Workflow

Position the console where it won't interfere with UI testing
Use keyboard shortcuts for faster navigation
Utilize search history for common queries
Export logs when debugging complex issues
Configure appropriate log levels for different environments

🔒 TypeScript Support

The module includes full TypeScript definitions for all features:

interface DevLogger {
  log(...args: any[]): void
  info(...args: any[]): void
  warn(...args: any[]): void
  error(...args: any[]): void
  debug(...args: any[]): void
  group(label: string): void
  groupEnd(): void
  time(label: string): void
  timeEnd(label: string): void
  // ... more methods
}