Vue 3 UnicornLog

1.0.0

A magical 🦄 plugin to make coloring the console output easier and more flexible.

Sometimes when building your application/site you don't want to see your linter complaining about using console functions. This helps to keep your linter happy so you can concentrate on writing bug free magical code.

It also has the ability to run the console functions depending on environment variables so you can keep your production site's console quiet.

This plugin is also available for Vue 2 here.

Demo

Open DevTools and click on the "Console" tab and try out some Examples.

Installation

				pnpm add vue3-unicorn-log

				npm i vue3-unicorn-log

Register Plugin

				import { createApp } from 'vue';
import UnicornLog from 'vue3-unicorn-log';

createApp()
  .use(UnicornLog)
  .mount('#app');

Usage

				<script setup>
import { inject } from 'vue';

const $unicornLog = inject('$unicornLog');

$unicornLog();
</script>

				<script>
import { inject } from 'vue';

export default {
	setup() {
		const $unicornLog = inject('$unicornLog');

		$unicornLog();

		return {};
	},
};
</script>

				<script>
export default {
	inject: ['$unicornLog'],
	mounted() {
		this.$unicornLog();
	},
};
</script>

Plugin Options

Name	Type	Default	Options	Description
defaultStyles	Object	const rainbowLinearGradient = `linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%) )`; 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', ], }	`{ log: [], info: [], }`	Used to adjust the default styles.
disabled	Boolean	false	true false	Disables the output of the log in the console. This works best when using an environment to conditionally set so it will log in development, but not on the production site.
logPrefix	Boolean \| String	false	-	Prepends a string to to the output.
styles	String \| Array	-	Styling Console Output	Sets the styles for the log.
type	String	log	clear debug dir error group groupCollapsed groupEnd infos log table trace warn	Specifies which console method should be used.

				import { createApp } from 'vue';
import UnicornLog from 'vue3-unicorn-log';

const app = createApp(App);

app.use(UnicornLog, {
	logPrefix: '[OMG LOOK HERE!]:',
	disabled: process.env.UNICORN_LOG !== 'true',
	// ...other options
});

app.mount('#app');

It is recommended to set the disabled option to use a .env variable when possible. This way you will not have your logs exposed to the public when on a production site.

Log Options

Name	Type	Default	Options	Description
array	Array	`[]`	-	Used to include an array in the log.
disabled	Boolean	false	true false	Disables the output of the log in the console. This works best when using an environment to conditionally set so it will log in development, but not on the production site.
logPrefix	Boolean \| String	false	-	Prepends a string to to the output.
magical	Boolean	false	true false	Adds a magical style to the output.
name	String	[UnicornLog]:	-	If `logPrefix` option is set as a Boolean of true, it will use the `name` option for the prefix.
objects	Object	`{}`	-	Used to include objects in the log.
styles	String \| Array	-	Styling Console Output	Sets the styles for the log.
text	String	🦄	-	Used to include a string in the log.
type	String	log	clear debug dir error group groupCollapsed groupEnd infos log table trace warn	Specifies which console method should be used.

Console Methods

For a description of the different log methods, refer to the Web APIs MDN developer documentation for console.

Examples

Open DevTools and click on the "Console" tab to view example results.

				$unicornLog();

`text`

				$unicornLog({
	text: 'Hello World',
});

`type`

				$unicornLog({
	text: 'Hello World',
	type: 'log',
});

`styles`

For a list of the different available styles, refer to the Web APIs MDN Styling Console Output developer documentation. Depending on the browser, some styles may not work.

				$unicornLog({
	text: 'Hello World',
	styles: 'color: DeepPink; font-size: 2rem;',
});

				$unicornLog({
	text: 'Hello World',
	styles: [
		'background: black',
		'border: 1px dashed magenta',
		'color: magenta',
		'font-family: monospace',
		'font-size: 2em',
		'padding: 10px',
	],
});

You can also set the style option to a magical word to make the magic happen. This can also be set with the magical option to true.

				$unicornLog({
	text: 'Hello World',
	styles: 'unicorn',
});

`disabled`

				$unicornLog({
	text: 'Hello World',
	disabled: true,
});

				$unicornLog({
	text: 'Hello World',
	disabled: process.env.UNICORN_LOG !== 'true',
});

`logPrefix`

				$unicornLog({
	text: 'Hello World',
	logPrefix: '[Bunnies]:',
});

If logPrefix option is set as a Boolean of true, it will use the default name option for the prefix.

				$unicornLog({
	text: 'Hello World',
	logPrefix: true,
});

				$unicornLog({
	text: 'Hello World',
	logPrefix: true,
	name: 'Bob',
});

`magical`

				$unicornLog({
	text: 'Hello World',
	magical: true,
});

`name`

				$unicornLog({
	text: 'Hello World',
	logPrefix: true,
	name: 'Bob',
});

`objects`

				$unicornLog({
	text: 'Hello World',
	objects: { foo: 'bar' },
});

				const foo = { foo: 'foo ' };
const bar = { bar: 'bar ' };

$unicornLog({
	text: 'Hello World',
	objects: { foo, bar },
});

				const foo = { foo: 'foo ' };
const bar = { bar: 'bar ' };

$unicornLog({
	text: 'Hello World',
	objects: { ...foo, ...bar },
});

`array`

				$unicornLog({
	text: 'Hello World',
	array: ['foo', 'bar'],
});

				const foo = { foo: 'foo ' };
const bar = { bar: 'bar ' };

$unicornLog({
	text: 'Hello World',
	array: [foo, bar],
});

				const foo = ['foo'];
const bar = ['bar'];

$unicornLog({
	text: 'Hello World',
	array: [...foo, ...bar],
});

Dependencies

Change Log

CHANGELOG.md

License

LICENSE.md