{"id":22907,"library":"vite-plugin-vconsole","title":"vite-plugin-vconsole","description":"Vite plugin for automatically injecting vConsole (a lightweight, extendable front-end developer tool for mobile web pages) into your application during development or specific build modes. Current stable version is 2.1.1, released in 2023. It supports Vite v2+, Node.js >=12, and works with both Vue and React. Key differentiators: dynamic configuration, custom vConsole plugins, multi-page support, and environment-aware enabling/disabling. Compared to alternatives like manually adding vConsole, this plugin automates the setup and teardown process, ensuring vConsole is only loaded when needed (e.g., development or test builds).","status":"active","version":"2.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/vadxq/vite-plugin-vconsole","tags":["javascript","vite","vconsole","typescript"],"install":[{"cmd":"npm install vite-plugin-vconsole","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-vconsole","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-vconsole","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency required for vConsole functionality; must be installed as a production dependency (not devDependency).","package":"vconsole","optional":false}],"imports":[{"note":"Named export, not default. ESM only; no CJS export.","wrong":"import viteVConsole from 'vite-plugin-vconsole'","symbol":"viteVConsole","correct":"import { viteVConsole } from 'vite-plugin-vconsole'"},{"note":"Use type import for TypeScript. Available since v2.0.0.","wrong":"import { ViteVConsoleOptions } from 'vite-plugin-vconsole'","symbol":"viteVConsole (type)","correct":"import type { ViteVConsoleOptions } from 'vite-plugin-vconsole'"},{"note":"entry must be an absolute path or array of absolute paths (use path.resolve). enabled controls injection; can be based on mode/command.","wrong":"viteVConsole({ entry: '/src/main.ts', enabled: true })","symbol":"viteVConsole config object","correct":"viteVConsole({ entry: path.resolve('src/main.ts'), enabled: true, config: { theme: 'dark' } })"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport { viteVConsole } from 'vite-plugin-vconsole';\nimport * as path from 'path';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    viteVConsole({\n      entry: path.resolve('src/main.ts'),\n      enabled: process.env.NODE_ENV !== 'production',\n      config: {\n        maxLogNumber: 1000,\n        theme: 'dark'\n      }\n    })\n  ]\n});","lang":"typescript","description":"Shows basic Vite config with vite-plugin-vconsole for Vue, enabling vConsole in non-production environments."},"warnings":[{"fix":"Replace localEnable with enabled. The enabled option now supports boolean or function returning boolean.","message":"v1.x option 'localEnable' was removed in v2.0.0; use 'enabled' instead.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Follow new plugin structure: plugin: [{ id: 'myPlugin', name: 'My Plugin', event: [ { eventName: 'init', callback() {} } ] }]","message":"v2.0.0 changed the way custom plugins are passed; now uses 'plugin' array with objects containing id, name, event array.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Import { viteVConsole } instead of { vconsole }.","message":"Options 'vconsole' (lowercase) is deprecated since v2.0.0; use 'viteVConsole' export.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Run 'npm install vconsole' without --save-dev (or -S).","message":"vconsole must be installed as a production dependency (not devDependency) because it is injected into the bundle.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use path.resolve('src/main.ts') or __dirname + '/src/main.ts'.","message":"The 'entry' option must be an absolute path or array of absolute paths. Relative paths like 'src/main.ts' will fail silently.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use 'import type { ViteVConsoleOptions } from 'vite-plugin-vconsole'.","message":"If using TypeScript, ensure you import types with 'import type' to avoid runtime errors.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"search_vec":"'12':45 '2.1.1':36 '2023':39 'ad':74 'altern':71 'applic':25 'autom':78 'automat':8 'awar':67 'build':30,95 'compar':69 'configur':56 'current':32 'custom':57 'develop':17,27,92 'differenti':54 'dynam':55 'e.g':91 'enabling/disabling':68 'end':16 'ensur':84 'environ':66 'environment-awar':65 'extend':13 'front':15 'front-end':14 'inject':9 'javascript':96 'key':53 'lightweight':12 'like':72 'load':88 'manual':73 'mobil':20 'mode':31 'multi':61 'multi-pag':60 'need':90 'node.js':44 'page':22,62 'plugin':3,6,59,77 'process':83 'react':52 'releas':37 'setup':80 'specif':29 'stabl':33 'support':41,63 'teardown':82 'test':94 'tool':18 'typescript':99 'v2':43 'vconsol':4,10,58,75,85,98 'version':34 'vite':2,5,42,97 'vite-plugin-vconsol':1 'vue':50 'web':21 'work':47","created_at":"2026-04-27T17:07:43.196214+00:00","updated_at":"2026-04-27T17:07:43.196214+00:00","problems":[{"fix":"npm install vconsole --save","cause":"vconsole not installed or installed as devDependency instead of dependency.","error":"Cannot find module 'vconsole'"},{"fix":"Change to `import { viteVConsole } from 'vite-plugin-vconsole'`","cause":"Default import used instead of named import.","error":"TypeError: viteVConsole is not a function"},{"fix":"Use path.resolve() to get absolute path: `entry: path.resolve('src/main.ts')`","cause":"Relative path used for entry option.","error":"Error: ENOENT: no such file or directory, open '.../src/main.ts'"},{"fix":"Ensure vconsole is in dependencies, not devDependencies.","cause":"enabled is true but vconsole package missing from production bundle.","error":"vConsole is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/vadxq/vite-plugin-vconsole","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-vconsole","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","testing","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}