Skip to main content
Logging with multiple log levels and adapter pattern for console, consola, and pino integration.

​
Features

  • Multiple log levels (trace, debug, info, warn, error, fatal)
  • Adapter pattern for console/consola/pino integration
  • Enable/disable logging
  • Level-based filtering
  • Prefix support

​
Installation

import { createLoggerPlugin } from '@vuetify/v0'

const app = createApp(App)
app.use(createLoggerPlugin({
  level: 'info',
  prefix: '[MyApp]',
}))

​
Basic Usage

<script setup lang="ts">
import { useLogger } from '@vuetify/v0'

const logger = useLogger()

logger.info('Application started')
logger.debug('Debug information', { data: 'value' })
logger.error('An error occurred', error)
</script>

​
API Reference

​
createLoggerPlugin()

Creates a logger plugin.
​
options
LoggerPluginOptions
Plugin configuration
​
level
LogLevel
default:"'info'"
Minimum log level to output:
  • 'trace': All messages
  • 'debug': Debug and above
  • 'info': Info and above (default)
  • 'warn': Warnings and above
  • 'error': Errors only
  • 'fatal': Fatal errors only
  • 'silent': No output
​
prefix
string
Prefix for all log messages
​
enabled
boolean
default:"true"
Enable or disable logging
​
adapter
LoggerAdapter
Logger adapter (defaults to Vuetify0LoggerAdapter)
​
namespace
string
default:"'v0:logger'"
The namespace for the logger context

​
LoggerContext

​
debug
(message: string, ...args: unknown[]) => void
Log debug message (level: 1)
​
info
(message: string, ...args: unknown[]) => void
Log info message (level: 2)
​
warn
(message: string, ...args: unknown[]) => void
Log warning message (level: 3)
​
error
(message: string, ...args: unknown[]) => void
Log error message (level: 4)
​
trace
(message: string, ...args: unknown[]) => void
Log trace message (level: 0)
​
fatal
(message: string, ...args: unknown[]) => void
Log fatal error message (level: 5)
​
level
(level: LogLevel) => void
Change the current log levelExample:
logger.level('debug')
​
current
() => LogLevel
Get the current log levelExample:
const level = logger.current() // 'info'
​
enable
() => void
Enable logging
​
disable
() => void
Disable logging
​
enabled
() => boolean
Check if logging is enabled

​
Log Levels

Log levels in order from lowest to highest:
  1. trace (0): Very detailed debugging information
  2. debug (1): Debugging information
  3. info (2): Informational messages
  4. warn (3): Warning messages
  5. error (4): Error messages
  6. fatal (5): Fatal error messages
  7. silent (6): No output
const logger = useLogger()

// Set level to 'warn' - only warn, error, and fatal will be logged
logger.level('warn')

logger.trace('Not logged')
logger.debug('Not logged')
logger.info('Not logged')
logger.warn('Logged') // ✓
logger.error('Logged') // ✓
logger.fatal('Logged') // ✓

​
Examples

​
Basic Logging

import { useLogger } from '@vuetify/v0'

const logger = useLogger()

logger.info('User logged in', { userId: 123 })
logger.error('Failed to load data', error)
logger.debug('Request payload', payload)

​
Dynamic Level Control

<script setup lang="ts">
import { useLogger } from '@vuetify/v0'
import { ref } from 'vue'

const logger = useLogger()
const currentLevel = ref(logger.current())

const changeLevel = (level: LogLevel) => {
  logger.level(level)
  currentLevel.value = level
}
</script>

<template>
  <div>
    <p>Current level: {{ currentLevel }}</p>
    <button @click="changeLevel('debug')">Debug</button>
    <button @click="changeLevel('info')">Info</button>
    <button @click="changeLevel('warn')">Warn</button>
  </div>
</template>

​
Enable/Disable Logging

const logger = useLogger()

// Disable logging
logger.disable()
logger.info('This will not be logged')

// Enable logging
logger.enable()
logger.info('This will be logged')

// Check if enabled
if (logger.enabled()) {
  logger.debug('Logging is enabled')
}

​
Adapters

​
Console Adapter (Default)

import { createLoggerPlugin, Vuetify0LoggerAdapter } from '@vuetify/v0'

app.use(createLoggerPlugin({
  adapter: new Vuetify0LoggerAdapter({ prefix: '[App]' }),
}))

​
Consola Adapter

import { ConsolaLoggerAdapter } from '@vuetify/v0'
import { createConsola } from 'consola'

const consola = createConsola({
  level: 3,
})

app.use(createLoggerPlugin({
  adapter: new ConsolaLoggerAdapter(consola),
}))

​
Pino Adapter

import { PinoLoggerAdapter } from '@vuetify/v0'
import pino from 'pino'

const logger = pino({
  level: 'info',
})

app.use(createLoggerPlugin({
  adapter: new PinoLoggerAdapter(logger),
}))

​
Custom Adapter

import type { LoggerAdapter } from '@vuetify/v0'

class MyLoggerAdapter implements LoggerAdapter {
  debug(message: string, ...args: unknown[]) {
    myService.log('debug', message, ...args)
  }
  
  info(message: string, ...args: unknown[]) {
    myService.log('info', message, ...args)
  }
  
  warn(message: string, ...args: unknown[]) {
    myService.log('warn', message, ...args)
  }
  
  error(message: string, ...args: unknown[]) {
    myService.log('error', message, ...args)
  }
  
  trace(message: string, ...args: unknown[]) {
    myService.log('trace', message, ...args)
  }
  
  fatal(message: string, ...args: unknown[]) {
    myService.log('fatal', message, ...args)
  }
}

app.use(createLoggerPlugin({
  adapter: new MyLoggerAdapter(),
}))

​
Development Mode

In development mode, the logger is exposed on window for debugging: 
// In browser console (dev mode only)
window.__v0Logger__.level('trace')
window.__v0Logger__.info('Test message')

Build docs developers (and LLMs) love

Get started for freeTalk to us