LogLines

Visor de logs con coloreado por nivel estilo terminal.

LogLines

Demo

INFO Starting dev server...

⚠WARN Deprecated API in v3

✕ERROR Failed to connect

·DEBUG Cache miss for key

INFO Server ready on port 5173

<LogLines
  :lines="[
    { text: 'INFO  Starting dev server...', level: 'info' },
    { text: 'WARN  Deprecated API in v3', level: 'warn' },
    { text: 'ERROR Failed to connect', level: 'error' },
    { text: 'DEBUG Cache miss for key', level: 'debug' },
    { text: 'INFO  Server ready on port 5173', level: 'info' },
  ]"
/>

Props

lines

Array de líneas de log con text y level opcional.

<LogLines :lines="[
  { text: 'Starting...', level: 'info' },
  { text: 'Error!', level: 'error' },
]" />

max

Máximo de líneas visibles (las más recientes). Excedentes se descartan.

Line 3

Line 4

Line 5

<LogLines
  :lines="[
    { text: 'Line 1', level: 'info' },
    { text: 'Line 2', level: 'info' },
    { text: 'Line 3', level: 'info' },
    { text: 'Line 4', level: 'info' },
    { text: 'Line 5', level: 'info' },
  ]"
  :max="3"
/>

timestamps

Agrega prefijo [HH:MM:SS] a cada línea.

[19:00:31] Server started

[19:00:31]✕Connection lost

<LogLines
  :lines="[
    { text: 'Server started', level: 'info' },
    { text: 'Connection lost', level: 'error' },
  ]"
  timestamps
/>

color

Color del componente (se aplica al borde).

Primary log

Success log

<LogLines
  :lines="[
    { text: 'Primary log', level: 'info' },
    { text: 'Success log', level: 'info' },
  ]"
  color="success"
/>

Tipos

LogLine

Campo	Tipo	Requerido	Descripción
text	string	✅	Contenido de la línea
level	'info' \| 'warn' \| 'error' \| 'debug'	❌	Nivel de log

API

Prop	Type	Default	Description
lines	Array<{text, level?}>	[]	Líneas de log
max	number	100	Máximo de líneas visibles
color	'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'	'primary'	Color del componente
timestamps	boolean	false	Prefijo [HH:MM:SS]

Tokens usados

--font-mono, --text, --text-muted, --color-*