useLogger

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

Copy Markdown

Preview Intermediate Jun 1, 2026

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>

When several composables share the app-level logger, their output blends together with no easy way to tell which one emitted what. Pass a scope key to useLogger to tag every message from that caller with a [scope] segment, layered after the plugin prefix:

import { useLogger } from '@vuetify/v0'

const logger = useLogger('createKanban')

logger.warn('drop rejected')
// → [v0 warn] [createKanban] drop rejected

useLogger() with no argument is unchanged — it returns the plugin-configured logger as-is. A scoped logger shares the plugin’s level, enabled state, and adapter; only the message prefix differs, so re-leveling or disabling the shared logger affects every scope. A blank scope key is treated as no scope. Without a plugin installed, useLogger falls back to a console logger and still appends the [scope] segment, so output stays attributable.

Adapters

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

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

The default V0LoggerAdapter 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

Extend LoggerAdapter to route logs to any destination:

import { LoggerAdapter } from '@vuetify/v0'

class DatadogLoggerAdapter extends 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() }))

abstract class LoggerAdapter {
  abstract debug (message: string, ...args: unknown[]): void
  abstract info (message: string, ...args: unknown[]): void
  abstract warn (message: string, ...args: unknown[]): void
  abstract error (message: string, ...args: unknown[]): void
  trace? (message: string, ...args: unknown[]): void
  fatal? (message: string, ...args: unknown[]): void
}

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

API Reference

The following API details are for the useLogger composable.

useLogger

4 functions, 4 options, 11 methods