{"id":13417403,"url":"https://github.com/vadxq/vite-plugin-vconsole","last_synced_at":"2025-04-10T03:55:58.987Z","repository":{"id":43825806,"uuid":"370546818","full_name":"vadxq/vite-plugin-vconsole","owner":"vadxq","description":"vite2/3/4/5 plugins vconsole","archived":false,"fork":false,"pushed_at":"2025-01-02T11:51:01.000Z","size":152,"stargazers_count":80,"open_issues_count":3,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T03:55:54.244Z","etag":null,"topics":["react","vconsole","vite","vue"],"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/vadxq.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2021-05-25T02:58:43.000Z","updated_at":"2025-03-27T01:28:53.000Z","dependencies_parsed_at":"2024-02-05T11:07:41.957Z","dependency_job_id":"be0542b5-a13b-4541-a653-50be86da1cb8","html_url":"https://github.com/vadxq/vite-plugin-vconsole","commit_stats":{"total_commits":27,"total_committers":4,"mean_commits":6.75,"dds":"0.40740740740740744","last_synced_commit":"6f85d19fc36f1137f73ac2a3073a43a1ddc3f88d"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadxq%2Fvite-plugin-vconsole","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadxq%2Fvite-plugin-vconsole/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadxq%2Fvite-plugin-vconsole/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadxq%2Fvite-plugin-vconsole/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vadxq","download_url":"https://codeload.github.com/vadxq/vite-plugin-vconsole/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248155001,"owners_count":21056542,"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":["react","vconsole","vite","vue"],"created_at":"2024-07-30T22:00:36.550Z","updated_at":"2025-04-10T03:55:58.956Z","avatar_url":"https://github.com/vadxq.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Framework-agnostic Plugins"],"readme":"# vite-plugin-vconsole\n\n[![](https://img.shields.io/npm/v/vite-plugin-vconsole.svg?style=flat-square)](https://www.npmjs.com/package/vite-plugin-vconsole)\n[![](https://img.shields.io/npm/l/vite-plugin-vconsole.svg?style=flat-square)](https://www.npmjs.com/package/vite-plugin-vconsole)\n[![](https://img.shields.io/npm/dt/vite-plugin-vconsole.svg?style=flat-square)](https://www.npmjs.com/package/vite-plugin-vconsole)\n\n\u003e vite plugin for vconsole\n\u003e\n\u003e A plugin for Vite v2+ that helps developers easily use the functions of VConsole in various environments.\n\n**English** | [中文](./README.zh_CN.md)\n\n## Install (yarn or npm)\n\n**node version:** \u003e=12.0.0\n\n**vite version:** \u003e=2.0.0\n\n```bash\n# npm\nnpm i vite-plugin-vconsole -D\nnpm i  vconsole -S\n\n# yarn\nyarn add vconsole\nyarn add vite-plugin-vconsole -D\n\n# pnpm\npnpm add vconsole\npnpm add -D vite-plugin-vconsole\n```\n\n## Example\n\n```bash\n# vue\ncd ./example/vue-demo\n\nyarn install\n\nyarn dev\n\n```\n\n```bash\n# react\ncd ./example/react-demo\n\nyarn install\n\nyarn dev\n\n```\n\n## Usage\n\n### Config plugin in vite.config.ts\n\n- **Vue** sample config\n\n```ts\n// tips: If the reference path hint does not exist, you can import the @types/node package\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport { viteVConsole } from 'vite-plugin-vconsole';\nimport * as path from 'path'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    vue(),\n    viteVConsole({\n      entry: path.resolve('src/main.ts'), // or you can use entry: [path.resolve('src/main.ts')]\n      enabled: true,\n      config: {\n        log: {\n          maxLogNumber: 1000,\n        },\n        theme: 'dark'\n      }\n    })\n  ]\n});\n```\n\n- **Vue** sample config for multi pages\n\n```ts\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport { viteVConsole } from 'vite-plugin-vconsole';\nimport * as path from 'path'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    vue(),\n    viteVConsole({\n      entry: [path.resolve('src/main.ts')], // entry for each page, different from the above\n      enabled: true,\n      config: {\n        log: {\n          maxLogNumber: 1000,\n        },\n        theme: 'dark'\n      }\n    })\n  ]\n});\n```\n\n- **React** sample config\n\n```ts\nimport { defineConfig } from 'vite';\nimport reactRefresh from '@vitejs/plugin-react-refresh';\nimport { viteVConsole } from 'vite-plugin-vconsole';\nimport * as path from 'path';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    reactRefresh(),\n    viteVConsole({\n      entry: path.resolve('src/main.tsx'),\n      enabled: true,\n      config: {\n        log: {\n          maxLogNumber: 1000,\n        },\n        theme: 'dark'\n      }\n    })\n  ]\n});\n```\n\n- Different from the production environment and development environment\n\n```ts\n// Different from the production environment and development environment\n// You can use command / mode to distinguish usage\nimport { UserConfigExport, ConfigEnv } from 'vite';\nimport { viteVConsole } from 'vite-plugin-vconsole';\nimport vue from '@vitejs/plugin-vue';\nimport * as path from 'path'\n\nexport default ({ command, mode }: ConfigEnv): UserConfigExport =\u003e {\n  return {\n    plugins: [\n      vue(),\n      viteVConsole({\n        entry: [path.resolve('src/main.ts')], // entry file\n        enabled: command !== 'serve' || mode === 'test', // build production\n        config: { // vconsole options\n          log: {\n            maxLogNumber: 1000,\n          },\n          theme: 'light'\n        }\n      })\n    ],\n  };\n};\n```\n\n- vConsole plugin config\n\n```javascript\nviteVConsole({\n  entry: path.resolve('src/main.ts'),\n  enabled: true,\n  config: {\n    theme: 'dark',\n    onReady() {\n      console.log(23333);\n    }\n  },\n  plugin: [\n    {\n      id: 'my_plugin',\n      name: 'MyPlugin',\n      event: [\n        {\n          eventName: 'init',\n          callback: function () {\n            console.log('My plugin init');\n          }\n        },\n        {\n          eventName: 'renderTab',\n          callback: function () {\n            console.log('My plugin renderTab');\n          }\n        }\n      ]\n    },\n    {\n      id: 'my_plugin2',\n      name: 'MyPlugin2',\n      event: [\n        {\n          eventName: 'init',\n          callback: function () {\n            console.log('My plugin2 init');\n          }\n        },\n        {\n          eventName: 'renderTab',\n          callback: function () {\n            console.log('My plugin2 renderTab');\n          }\n        }\n      ]\n    }\n  ]\n})\n```\n\n### viteVConsole Options\n\n```ts\n/// \u003creference types=\"vconsole\" /\u003e\n\n{\n  entry: string | string[]; // entry file require\n  enabled?: boolean;\n  config?: VConsoleOptions\n  plugin?: {\n    id: string;\n    name: string;\n    event: {\n      eventName: string;\n      callback: (data?: any) =\u003e void;\n    }[]\n  }[]\n}\n```\n\n- A custom rule that triggers destruction, see the question request: [How to judge page userAgent to choose whether to load vconsole](https://github.com/vadxq/vite-plugin-vconsole/issues/12)\n\n```javascript\n// customHide: A piece of executable code, used to start some APIs on the browser side.\nviteVConsole({\n  entry: path.resolve('src/main.ts'),\n  enabled: true,\n  customHide: `/iphone/g.test(navigator.userAgent.toLowerCase())`,\n  config: {\n    theme: 'dark',\n    onReady() {\n      console.log(23333);\n    }\n  },\n})\n```\n\n- Dynamic configuration, see issue requirements: [How to dynamically modify the theme?](https://github.com/vadxq/vite-plugin-vconsole/issues/21)\n\nPlease note that the dynamic configuration here has the highest priority, and dynamicConfig will override the configuration in config.\n\nYou can provide a stringified runnable function that listens for a parameter as a trigger. Then modify a global variable `window.vConsole.dynamicChange.value`. When this variable changes, the dynamic configuration will take effect again. Here you can combine the above dynamic configuration to dynamically switch themes.\n\nThe reason why this design uses more stringified code is to reduce code intrusion into the production environment.\n\n```ts\n// Example, distinguish theme light and dark colors based on class\n// Distinguish black or white based on whether it has a dark class name\nviteVConsole({\n  config: {\n    theme: 'light'\n  },\n  dynamicConfig: {\n    theme: `document.querySelectorAll('.dark').length ? 'dark' : 'light'`,\n  },\n  // If you need to switch themes without refreshing\n  eventListener: `\n    const targetElement = document.querySelector('body'); // Select the element to listen to\n    const observerOptions = {\n      attributes: true, // Listen for property changes\n      attributeFilter: ['class'] // Only monitor class attribute changes\n    };\n\n    // Define callback functions to handle observed changes\n    function handleAttributeChange(mutationsList, observer) {\n      for(let mutation of mutationsList) {\n        if (mutation.type === 'attributes' \u0026\u0026 mutation.attributeName === 'class') {\n          console.log('The class attribute was modified.');\n          // Add the code you need to execute here\n          if (window \u0026\u0026 window.vConsole) {\n            window.vConsole.dynamicChange.value = new Date().getTime();\n          }\n        }\n      }\n    }\n\n    // Create an observer instance and pass in the callback function\n    const observer = new MutationObserver(handleAttributeChange);\n\n    // Start observing the target element\n    observer.observe(targetElement, observerOptions);\n\n    // Stop observing when it is no longer needed\n    // observer.disconnect();\n  `,\n})\n```\n\n## Options\n\n### entry\n\n**type:** `string | string[]`\n**require:**\n\nmust support. Supports multiple entries when it is an array.\n\n### enabled\n\n**type:** `boolean`\n\n**default:** `true`\n\n### config\n\n**type:**: `VConsoleOptions`\n\n### plugin\n\n**type:**\n\n```type\n{\n  id: string;\n  name: string;\n  event: {\n    eventName: string;\n    callback: (data?: any) =\u003e void;\n  }[]\n}[]\n```\n\n### customHide\n\n**type:**: String\n\n## Typescript\n\nAdd a reference to `vconsole`\n\n```ts\n/// \u003creference types=\"vconsole\" /\u003e\n```\n\n### dynamicConfig\n\nDynamic configuration items, which contain stringified functions. (It is recommended not to use dynamic configuration in production environments)\n\n```ts\ndynamicConfig: {\n  theme?: string;\n  target?: string;\n  defaultPlugins?: string;\n  disableLogScrolling?: boolean;\n  pluginOrder?: string;\n  log?: string;\n  network?: string;\n  storage?: string;\n}\n```\n\nHere you can combine the following configurations to dynamically switch themes. Modifying a global variable `window.vConsole.dynamicChange.value` will trigger dynamic configuration reloading without refreshing the page.\n\n### eventListener\n\nYou can provide a stringified runnable function that listens for a parameter as a trigger. Then modify a global variable `window.vConsole.dynamicChange.value`. When this variable changes, the dynamic configuration will take effect again. Here you can combine the above dynamic configuration to dynamically switch themes.\n\n```ts\neventListener?: string\n```\n\n## Sample project\n\n[vite-vue-prod-template](https://github.com/vadxq/vite-vue-prod-template)\n\n## Compatible to solve the Windows path problem\n\nUpdate to V1.1.1+ version, Now you can use it normally in Windows.\n\n## Support multi-page configuration\n\nUpdate to V1.2.0+ version, can support multi-page configuration.\n\nMany thanks to [@AfireHong](https://github.com/AfireHong) for support!\n\n## Support VConsole Functions Configuration\n\nUpdate to V1.3.0+ version, can support VConsole Functions Configuration.\n\nMany thanks to [@KeJunMao](https://github.com/KeJunMao) for support!\n\n## Support VConsole Plugin Configuration.Support custom destruction\n\nUpdate to V2.0.0+ version, can support VConsole Plugin Configuration.Also supports custom destruction.\n\n## Support VConsole dynamic configuration. Support eventListener\n\nUpdated to version V2.1.0+, VConsole dynamic configuration can be configured. and you can give some eventListener code. It can be easily configured to follow theme changes, etc.\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadxq%2Fvite-plugin-vconsole","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvadxq%2Fvite-plugin-vconsole","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadxq%2Fvite-plugin-vconsole/lists"}