Colorize Console Log With The vue-unicorn-log Component

Install & Download:

# Yarn
$ yarn add vue-unicorn-log
# NPM
$ npm i vue-unicorn-log

Description:

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'
});