vuejs-logger is to provide customizable logging functionality for Vue.js. Compatible with Vue2.
vue logger plugin, vuejs logging to file, vue 3 logging, vuejs logger example, vue log viewer, vue log4j, how to log data in vue js, client side logging vue
vuejs-logger is a tool that enables configurable logging for Vue applications. Features include :
- Output restriction based on selected loglevel.
- Automatically JSON.stringify() the (reactive) properties passed to the logger.
- Configurable options to customize output for log messages.
- Colored console messages for $log.warning, $log.error and $log.fatal.
How to make use of it:
Install & Download:
$ npm install vuejs-logger --save-exact
Usage
import VueLogger from 'vuejs-logger'; const isProduction = process.env.NODE_ENV === 'production'; const options = { isEnabled: true, logLevel : isProduction ? 'error' : 'debug', stringifyArguments : false, showLogLevel : true, showMethodName : true, separator: '|', showConsoleColors: true }; Vue.use(VueLogger, options);
new Vue({ data() { return { a : 'a', b : 'b' } }, created() { this.$log.debug('test', this.a, 123) this.$log.info('test', this.b) this.$log.warn('test') this.$log.error('test') this.$log.fatal('test') externalFunction() } }); function externalFunction() { // log from external function Vue.$log.debug('log from function outside component.'); }
Properties
Name | Required | Type | Default | Description |
---|---|---|---|---|
isEnabled | false | Boolean | true | Enables the vuejs-logger plugin, a useful toggle for production/development. |
logLevel | false | String | ‘debug’ | Choose between [‘debug’, ‘info’, ‘warn’, ‘error’, ‘fatal’]. Read production tips. |
stringifyArguments | false | Boolean | false | If true, all input will go through JSON.stringify(). Useful when printing reactive properties. |
showLogLevel | false | Boolean | false | If true, the loglevel will be shown. |
showMethodName | false | Boolean | false | If true, the method name of the parent function will be shown in the console. |
separator | false | String | ‘ l ‘ | The separator between parts of the output (sees screenshot. |
showConsoleColors | false | Boolean | false | If true, enables console.warn, console.fatal, console.error for corresponding loglevels. |
customizable logging, vuejs-logger Plugin/Github
See Demo And Download
Official Website(justinkames): Click Here
This superior jQuery/javascript plugin is developed by justinkames. For extra advanced usage, please go to the official website.