Skip to main content

​
V0 Adapter (Vuetify0LoggerAdapter)

The Vuetify0LoggerAdapter is the default console-based logger adapter for Vuetify Zero. It provides formatted, colorized console output for development and production environments.

​
Import

import { Vuetify0LoggerAdapter } from '@vuetify/v0/logger/adapters/v0'

​
Basic Usage

import { createApp } from 'vue'
import { createLoggerPlugin } from '@vuetify/v0/logger'
import { Vuetify0LoggerAdapter } from '@vuetify/v0/logger/adapters/v0'

const adapter = new Vuetify0LoggerAdapter({
  prefix: 'app',
  colors: true,
  timestamps: true
})

const app = createApp(App)
app.use(createLoggerPlugin({ adapter }))
The Vuetify0LoggerAdapter is the default adapter when no adapter is specified:
app.use(createLoggerPlugin()) // Uses Vuetify0LoggerAdapter automatically

​
Using in Components

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

const logger = useLogger()

function handleClick() {
  logger.debug('Button clicked')
  logger.info('Processing action')
  logger.warn('This might take a while')
}

function handleError(error: Error) {
  logger.error('Operation failed', error)
}
</script>

​
Log Levels

import { useLogger } from '@vuetify/v0/logger'

const logger = useLogger()

logger.trace('Trace message')   // Gray (browser only)
logger.debug('Debug message')   // Blue
logger.info('Info message')     // Green
logger.warn('Warning message')  // Orange
logger.error('Error message')   // Red
logger.fatal('Fatal message')   // Bold red

​
Configuration Options

interface Vuetify0LoggerOptions {
  prefix?: string      // Log prefix (default: 'v0')
  colors?: boolean     // Enable colors (default: true)
  timestamps?: boolean // Show timestamps (default: true)
}

​
Custom Prefix

import { Vuetify0LoggerAdapter } from '@vuetify/v0/logger/adapters/v0'

const adapter = new Vuetify0LoggerAdapter({
  prefix: 'myapp'
})

// Logs: [myapp info] Message

​
Disable Colors

const adapter = new Vuetify0LoggerAdapter({
  prefix: 'app',
  colors: false  // Disable color formatting
})

// Logs: [app info] Message (no colors)

​
Disable Timestamps

const adapter = new Vuetify0LoggerAdapter({
  prefix: 'app',
  timestamps: false  // Hide timestamps
})

// Logs: [app info] Message

​
Output Format

​
Browser

logger.info('User logged in', { userId: 123 })
// Output: 14:23:45 [v0 info] User logged in { userId: 123 }
//         ^-------^ ^------^ ^--------------^ ^-------------^
//         timestamp  prefix     message         args

​
Node.js

logger.info('Server started')
// Output: 2024-03-04T14:23:45.678Z [v0 info] Server started
//         ^-----------------------^ ^------^ ^-------------^
//         ISO timestamp              prefix   message

​
Color Scheme

In browser environments, logs are colorized:
LevelColorHex
traceGray#64748b
debugBlue#3b82f6
infoGreen#10b981
warnOrange#f59e0b
errorRed#ef4444
fatalBold Red#dc2626

​
Timestamp Format

​
Browser

// Format: HH:MM:SS
14:23:45 [v0 info] Message

​
Node.js

// Format: ISO 8601
2024-03-04T14:23:45.678Z [v0 info] Message

​
Environment-Specific Configuration

import { Vuetify0LoggerAdapter } from '@vuetify/v0/logger/adapters/v0'

const isDev = import.meta.env.DEV

const adapter = new Vuetify0LoggerAdapter({
  prefix: isDev ? 'dev' : 'prod',
  colors: isDev,      // Colors only in dev
  timestamps: true
})

​
Multiple Loggers

import { createLogger } from '@vuetify/v0/logger'
import { Vuetify0LoggerAdapter } from '@vuetify/v0/logger/adapters/v0'

const authLogger = createLogger({
  adapter: new Vuetify0LoggerAdapter({ prefix: 'auth' })
})

const apiLogger = createLogger({
  adapter: new Vuetify0LoggerAdapter({ prefix: 'api' })
})

authLogger.info('Login successful')
// Output: 14:23:45 [auth info] Login successful

apiLogger.error('Request failed')
// Output: 14:23:45 [api error] Request failed

​
SSR Support

The adapter automatically adapts to server-side rendering: 
import { Vuetify0LoggerAdapter } from '@vuetify/v0/logger/adapters/v0'

const adapter = new Vuetify0LoggerAdapter()

// In browser:
logger.info('Message') 
// Output: 14:23:45 [v0 info] Message (with colors)

// In Node.js:
logger.info('Message')
// Output: 2024-03-04T14:23:45.678Z [v0 info] Message (no colors)

​
Logging with Arguments

import { useLogger } from '@vuetify/v0/logger'

const logger = useLogger()

// Multiple arguments
logger.info('User action', { userId: 123 }, { action: 'click' })
// Output: 14:23:45 [v0 info] User action { userId: 123 } { action: 'click' }

// Error objects
try {
  throw new Error('Something went wrong')
} catch (error) {
  logger.error('Error caught', error)
  // Output: 14:23:45 [v0 error] Error caught Error: Something went wrong
  //         at ... (stack trace)
}

​
TypeScript

import { Vuetify0LoggerAdapter } from '@vuetify/v0/logger/adapters/v0'
import type { LogLevel } from '@vuetify/v0/logger'

const adapter = new Vuetify0LoggerAdapter({
  prefix: 'app',
  colors: true,
  timestamps: true
})

// Fully typed methods
adapter.debug('Debug message', { data: 123 })
adapter.info('Info message')
adapter.warn('Warning message')
adapter.error('Error message', new Error('failed'))
adapter.trace('Trace message')
adapter.fatal('Fatal message')

​
Performance

The Vuetify0LoggerAdapter is lightweight and optimized for development:
  • Minimal overhead - Direct console API calls
  • No dependencies - Pure JavaScript implementation
  • Browser-optimized - Uses console styling APIs
  • SSR-safe - Adapts to Node.js and browser environments

​
Comparison with Other Adapters

FeatureV0AdapterConsolaAdapterPinoAdapter
SetupZero configRequires ConsolaRequires Pino
ColorsBuilt-inBuilt-inVia pino-pretty
TimestampsBuilt-inVia configVia config
Structured logsNoYesYes
PerformanceGoodGoodExcellent
Best forDevelopmentDevelopmentProduction

​
API Reference

​
Constructor

class Vuetify0LoggerAdapter implements LoggerAdapter

constructor(options?: {
  prefix?: string
  colors?: boolean
  timestamps?: boolean
})

​
Options

OptionTypeDefaultDescription
prefixstring'v0'Log message prefix
colorsbooleantrueEnable color formatting
timestampsbooleantrueShow timestamps

​
Methods

MethodDescription
debug(message, ...args)Log debug message
info(message, ...args)Log info message
warn(message, ...args)Log warning message
error(message, ...args)Log error message
trace(message, ...args)Log trace message
fatal(message, ...args)Log fatal message

​
When to Use

V0 Adapter

Development Quick setup, formatted console output

Consola Adapter

Development Fancy formatting, custom reporters

Pino Adapter

Production High performance, structured logging

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us