Colorize Console Log With The vue-unicorn-log Component

With the vue-unicorn-log component, your Vue.js team can easily change the colors of the text, background, and border of console output with just a few lines of code!

You can choose from any color you want – from fixed hex colors to CSS linear gradients.

How to use it:

1. Import and register the vue-unicorn-log.

import Vue from 'vue';
import UnicornLog from 'vue-unicorn-log';
Vue.use(UnicornLog,{
  // options here
});

2. Display a colorful log in your console.

this.$unicornLog({
  text: 'Vue.js',
  // custom styles
  styles: [
    'background: #222',
    'border: 1px dotted #333',
    'color: #fff',
    'font-family: Roboto',
    'font-size: 2em',
    'padding: 10px',
  ],
});

3. Use a built-in style instead:

  • magic
  • magical
  • prism
  • psychedelic
  • rainbow
  • trippy
  • unicorn
this.$unicornLog({
  text: 'Vue.js',
  styles: 'unicorn',
});

4. Set the console method:

  • clear
  • debug
  • dir
  • error
  • group
  • groupCollapsed
  • groupEnd
  • info
  • log
  • table
  • trace
  • warn
this.$unicornLog({
  text: 'Vue.js',
  type: 'error',
});

5. More configurations.

this.$unicornLog({
  text: 'Vue.js',
  disabled: true,
  logPrefix: '[output]:',
  name: 'Bob',
  magical: true,
  objects: { foo: 'bar' },
  array: ['foo', 'bar'],
});

6. Override the default global options.

Vue.use(UnicornLog,{
  defaultStyles: {
    log: [
      'background-color: black',
      `border-image: ${rainbowLinearGradient} 1`,
      'border-style: solid',
      'border-width: 4px',
      'color: #fff',
      'font-weight: normal',
      'padding: 8px',
    ],
    info: [
      'background-color: hsla(225, 100%, 8%, 1)',
      'box-shadow: 999px 0 0 hsla(225, 100%, 8%, 1)',
      'color: hsla(225, 100%, 85%, 1)',
      'display: block',
      'padding: 2px',
    ],
  }
  disabled: false,
  logPrefix: false,
  styles: 'font-weight: bold;',
  type: 'log'
});

Preview:

Colorize Console Log With The vue-unicorn-log Component

Changelog:

v1.0.6 (04/03/2022)

  • Update

Download Details:

Author: webdevnerdstuff

Live Demo: https://webdevnerdstuff.github.io/vue-unicorn-log/

Download Link: https://github.com/webdevnerdstuff/vue-unicorn-log/archive/refs/heads/main.zip

Official Website: https://github.com/webdevnerdstuff/vue-unicorn-log

Install & Download:

# Yarn
$ yarn add vue-unicorn-log

# NPM
$ npm i vue-unicorn-log
Tags:

Add Comment