{"id":17108409,"url":"https://github.com/justinkames/vuejs-logger","last_synced_at":"2025-05-15T07:07:08.250Z","repository":{"id":46701145,"uuid":"97393123","full_name":"justinkames/vuejs-logger","owner":"justinkames","description":"Provides customizable logging functionality for Vue.js. Compatible with Vue2.","archived":false,"fork":false,"pushed_at":"2024-10-24T21:16:09.000Z","size":48,"stargazers_count":245,"open_issues_count":23,"forks_count":50,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-21T13:39:50.923Z","etag":null,"topics":["logger","typescript","vue","vuejs","vuejs-logger","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/justinkames.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-16T15:39:02.000Z","updated_at":"2025-03-28T23:13:30.000Z","dependencies_parsed_at":"2024-11-19T20:45:37.822Z","dependency_job_id":null,"html_url":"https://github.com/justinkames/vuejs-logger","commit_stats":{"total_commits":56,"total_committers":4,"mean_commits":14.0,"dds":0.0535714285714286,"last_synced_commit":"aa6c92aec40fd22a56ac7b0812b8fad967280e87"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinkames%2Fvuejs-logger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinkames%2Fvuejs-logger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinkames%2Fvuejs-logger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinkames%2Fvuejs-logger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justinkames","download_url":"https://codeload.github.com/justinkames/vuejs-logger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251013580,"owners_count":21522871,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["logger","typescript","vue","vuejs","vuejs-logger","vuejs2"],"created_at":"2024-10-14T16:05:19.174Z","updated_at":"2025-05-15T07:07:03.240Z","avatar_url":"https://github.com/justinkames.png","language":"TypeScript","funding_links":[],"categories":["叫研发工具组","Components \u0026 Libraries","Dev Tools [🔝](#readme)","Dev Tools"],"sub_categories":["检查","Dev Tools","Inspect"],"readme":"# vuejs-logger\n\n\u003e ![](https://travis-ci.org/justinkames/vuejs-logger.svg?branch=master)\n    [![codecov](https://codecov.io/gh/justinkames/vuejs-logger/branch/master/graph/badge.svg)](https://codecov.io/gh/justinkames/vuejs-logger)\n    [![npm](https://img.shields.io/npm/dt/vuejs-logger.svg)](https://www.npmjs.com/package/vuejs-logger)\n    [![npm](https://img.shields.io/npm/dw/vuejs-logger.svg)](https://www.npmjs.com/package/vuejs-logger)\n    [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/justinkames/vuejs-logger/master/LICENSE)\n\n\u003e Provides customizable logging functionality for Vue.js. Compatible with Vue2.\n\n## Table of Contents\n\n- [Demo](#demo)\n- [Introduction](#introduction)\n- [Install](#install)\n- [Usage](#usage)\n- [Properties](#properties)\n- [Code example](#code-example)\n- [Production tips](#production-tips)\n- [Maintainers](#maintainers)\n- [Contribute](#contribute)\n- [License](#license)\n\n## Demo\n\n@ [https://codepen.io/justinkames/pen/BwGOVQ](https://codepen.io/justinkames/pen/BwGOVQ)\n\n## Introduction \n\nvuejs-logger is a tool that enables configurable logging for Vue applications. Features include :\n\n- Output restriction based on selected loglevel.\n- Automatically JSON.stringify() the (reactive) properties passed to the logger.\n- Configurable options to customize output for a log messages.\n- Colored console messages for $log.warning, $log.error and $log.fatal.\n\n```js\nlogLevels :  ['debug', 'info', 'warn', 'error', 'fatal']\n```\n\n\n## Install\n\nThis project uses [node](http://nodejs.org) and [npm](https://npmjs.com). \n\nhttps://www.npmjs.com/package/vuejs-logger\n\n```sh\n$ npm install vuejs-logger --save-exact\n```\n\n## Usage\n\nBelow you can find an example of how to use vuejs-logger :\n\n#### Properties\n\n| Name      | Required | Type          | Default     | Description |\n| ---       | ---      | ---           | ---         | ---         |\n| isEnabled      | false  | Boolean |  true            | Enables the vuejs-logger plugin, useful toggle for production/development. |\n| logLevel     | false | String | 'debug'           | Choose between ['debug', 'info', 'warn', 'error', 'fatal']. Read [production tips](#production-tips). |\n| stringifyArguments | false | Boolean          | false       | If true, all input will go through JSON.stringify(). Useful when printing reactive properties.|\n| showLogLevel  | false | Boolean          | false       | If true, the loglevel will be shown. |\n| showMethodName | false | Boolean | false       | If true, the method name of the parent function will be shown in the console. |\n| separator | false | String | ' l '       | The seperator between parts of the output ( see [screenshot](#screenshot). |\n| showConsoleColors | false | Boolean | false       | If true, enables console.warn, console.fatal, console.error for corresponding loglevels. |\n\n#### Code example\n\n```js\nimport VueLogger from 'vuejs-logger';\nconst isProduction = process.env.NODE_ENV === 'production';\n \nconst options = {\n    isEnabled: true,\n    logLevel : isProduction ? 'error' : 'debug',\n    stringifyArguments : false,\n    showLogLevel : true,\n    showMethodName : true,\n    separator: '|',\n    showConsoleColors: true\n};\n\nVue.use(VueLogger, options);\n```\n\n```js\nnew Vue({\n    data() {\n        return {\n            a : 'a',\n            b : 'b'\n        }\n    },\n    created() {\n        this.$log.debug('test', this.a, 123)\n        this.$log.info('test', this.b)\n        this.$log.warn('test')\n        this.$log.error('test')\n        this.$log.fatal('test')\n        externalFunction()\n    }\n});\n\nfunction externalFunction() {\n   // log from external function\n   Vue.$log.debug('log from function outside component.');\n}\n```\n\n\n#### Screenshot\n\n![screen shot 2017-10-17 at 10 54 05](https://user-images.githubusercontent.com/3469323/31655570-910fcbbe-b329-11e7-9738-bece4be4d1a8.png)\n\n## Production tips\nThe plugin can be disabled for production or a lower logLevel can be set to minimize output (as shown in [usage](#usage) ). If the logLevel is set to 'fatal' the plugin will \nignore all calls with less important loglevels in the code. \n\n```js\n    function foo() {\n        // these statements will print nothing if the logLevel is set to 'fatal'. But they will compile just fine. \n        this.$log.debug('test', 'bar')\n        this.$log.info('test')\n        this.$log.warn('test')\n        this.$log.error('test', 'foo')\n        // this statement will print if the logLevel is set to 'fatal'\n        this.$log.fatal('test', 'bar', 123)\n    }\n```\n\n## Maintainers\n\n[@justinkames](https://github.com/justinkames).\n\n## Contribute\n\nFeel free to dive in! [Open an issue](https://github.com/justinkames/vuejs-logger/issues/new) or submit PRs.\n\nvuejs-logger follows the [Contributor Covenant](http://contributor-covenant.org/version/1/3/0/) Code of Conduct.\n\n## License\n\n[MIT](LICENSE) © Justin Kames\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinkames%2Fvuejs-logger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustinkames%2Fvuejs-logger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinkames%2Fvuejs-logger/lists"}