Copy Markdown

IntermediateApr 7, 2026

Application logging with configurable levels, filtering, and swappable adapters for popular logging libraries.

Installation

Install the Logger plugin in your app’s entry point:

main.ts

import { createApp } from 'vue'
import { createLoggerPlugin } from '@vuetify/v0'
import App from './App.vue'

const app = createApp(App)

app.use(
  createLoggerPlugin({
    level: 'debug',
    prefix: '[MyApp]',
  })
)

app.mount('#app')

Usage

Once the plugin is installed, use the useLogger composable in any component:

vue

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

  const logger = useLogger()

  logger.info('Component mounted')
  logger.debug('Debug information', { userId: 123 })
  logger.warn('Warning message')
  logger.error('Error occurred', new Error('Something went wrong'))
</script>

<template>
  <div>
    <h1>Check the console for logs</h1>
  </div>
</template>

Adapters

Adapters let you swap the underlying logging implementation without changing your application code.

Adapter	Import	Description
`Vuetify0LoggerAdapter`	`@vuetify/v0`	Console-based logging (default)
`PinoLoggerAdapter`	`@vuetify/v0/logger/adapters/pino`	Pino↗ integration
`ConsolaLoggerAdapter`	`@vuetify/v0/logger/adapters/consola`	Consola↗ integration

The default Vuetify0LoggerAdapter maps each level to the correct native console method — debug → console.debug, info → console.info, warn → console.warn, error/fatal → console.error. This ensures browser DevTools can correctly filter by level.

Pino

Pino↗ is a high-performance JSON logger. Requires the pino package.

bash

pnpm add pino

bash

npm install pino

bash

yarn add pino

bash

bun add pino

src/plugins/zero.ts

import pino from 'pino'
import { PinoLoggerAdapter } from '@vuetify/v0/logger/adapters/pino'
import { createLoggerPlugin } from '@vuetify/v0'

const logger = pino({ level: 'debug' })

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

Consola

Consola↗ is an elegant console logger by UnJS. Requires the consola package.

bash

pnpm add consola

bash

npm install consola

bash

yarn add consola

bash

bun add consola

src/plugins/zero.ts

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

const consola = createConsola({ level: 4 })

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

Custom Adapters

Implement LoggerAdapter to route logs to any destination:

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

class DatadogLoggerAdapter implements LoggerAdapter {
  debug (message: string, ...args: unknown[]) {
    datadogLogs.logger.debug(message, ...args)
  }
  info (message: string, ...args: unknown[]) {
    datadogLogs.logger.info(message, ...args)
  }
  warn (message: string, ...args: unknown[]) {
    datadogLogs.logger.warn(message, ...args)
  }
  error (message: string, ...args: unknown[]) {
    datadogLogs.logger.error(message, ...args)
  }
}

app.use(createLoggerPlugin({ adapter: new DatadogLoggerAdapter() }))

interface LoggerAdapter {
  debug: (message: string, ...args: unknown[]) => void
  info:  (message: string, ...args: unknown[]) => void
  warn:  (message: string, ...args: unknown[]) => void
  error: (message: string, ...args: unknown[]) => void
  trace?: (message: string, ...args: unknown[]) => void  // optional
  fatal?: (message: string, ...args: unknown[]) => void  // optional
}

trace and fatal are optional — if omitted, those calls are silently dropped.

Architecture

useLogger uses the plugin pattern with a log adapter:

Reactivity

The logger exposes only functions — no reactive properties. All interactions are imperative.

Method	Notes
`debug(msg, ...args)`	Log at debug level
`info(msg, ...args)`	Log at info level
`warn(msg, ...args)`	Log at warn level
`error(msg, ...args)`	Log at error level
`trace(msg, ...args)`	Log at trace level
`fatal(msg, ...args)`	Log at fatal level
`level(newLevel)`	Change the active log level at runtime
`current()`	Return the current `LogLevel` string
`enabled()`	Return `true` if logging is enabled
`enable()`	Enable logging
`disable()`	Disable logging (silences all output)

Examples

Log Console

Interactive logger level control with live console output, demonstrating debug(), info(), warn(), and error() across all log levels.

Min level:

Console output

Click a log level button above

useLogger

Installation

Usage

Adapters

Pino

Consola

Custom Adapters

Architecture

Reactivity

Examples

Log Console

API Reference

Functions

createLogger

createLoggerContext

createLoggerPlugin

useLogger

Options

adapter

level

prefix

enabled

Methods

debug

info

warn

error

trace

fatal

level

current

enabled

enable

disable