{"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,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","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,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}