Registry / web-framework / vite-plugin-vconsole

vite-plugin-vconsole

library2.1.1jsnpmunverified

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).

web-framework testing devops

npm install vite-plugin-vconsole

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-VCONSO

vite-plugin-vconsole

web-frameworkjavascriptv2.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

viteVConsole

✓ import { viteVConsole } from 'vite-plugin-vconsole'

✗ import viteVConsole from 'vite-plugin-vconsole'

Named export, not default. ESM only; no CJS export.

viteVConsole (type)

✓ import type { ViteVConsoleOptions } from 'vite-plugin-vconsole'

✗ import { ViteVConsoleOptions } from 'vite-plugin-vconsole'

Use type import for TypeScript. Available since v2.0.0.

viteVConsole config object

✓ viteVConsole({ entry: path.resolve('src/main.ts'), enabled: true, config: { theme: 'dark' } })

✗ viteVConsole({ entry: '/src/main.ts', enabled: true })

entry must be an absolute path or array of absolute paths (use path.resolve). enabled controls injection; can be based on mode/command.

Shows basic Vite config with vite-plugin-vconsole for Vue, enabling vConsole in non-production environments.

import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { viteVConsole } from 'vite-plugin-vconsole'; import * as path from 'path'; export default defineConfig({ plugins: [ vue(), viteVConsole({ entry: path.resolve('src/main.ts'), enabled: process.env.NODE_ENV !== 'production', config: { maxLogNumber: 1000, theme: 'dark' } }) ] });

Debug

Known issues

breakingv1.x option 'localEnable' was removed in v2.0.0; use 'enabled' instead.

fix

Replace localEnable with enabled. The enabled option now supports boolean or function returning boolean.

affects: >=2.0.0

breakingv2.0.0 changed the way custom plugins are passed; now uses 'plugin' array with objects containing id, name, event array.

fix

Follow new plugin structure: plugin: [{ id: 'myPlugin', name: 'My Plugin', event: [ { eventName: 'init', callback() {} } ] }]

affects: >=2.0.0

deprecatedOptions 'vconsole' (lowercase) is deprecated since v2.0.0; use 'viteVConsole' export.

fix

Import { viteVConsole } instead of { vconsole }.

affects: >=2.0.0

gotchavconsole must be installed as a production dependency (not devDependency) because it is injected into the bundle.

fix

Run 'npm install vconsole' without --save-dev (or -S).

affects: >=1.0.0

gotchaThe 'entry' option must be an absolute path or array of absolute paths. Relative paths like 'src/main.ts' will fail silently.

fix

Use path.resolve('src/main.ts') or __dirname + '/src/main.ts'.

affects: >=1.0.0

gotchaIf using TypeScript, ensure you import types with 'import type' to avoid runtime errors.

fix

Use 'import type { ViteVConsoleOptions } from 'vite-plugin-vconsole'.

affects: >=2.0.0

Errors

Common errors & fixes

Cannot find module 'vconsole'

vconsole not installed or installed as devDependency instead of dependency.

fix

npm install vconsole --save

TypeError: viteVConsole is not a function

Default import used instead of named import.

fix

Change to `import { viteVConsole } from 'vite-plugin-vconsole'`

Error: ENOENT: no such file or directory, open '.../src/main.ts'

Relative path used for entry option.

fix

Use path.resolve() to get absolute path: `entry: path.resolve('src/main.ts')`

vConsole is not defined

enabled is true but vconsole package missing from production bundle.

fix

Ensure vconsole is in dependencies, not devDependencies.

Upgrade

Version history

2.1.1latest on npm

Audit

Dependencies

vconsolerequiredRuntime dependency required for vConsole functionality; must be installed as a production dependency (not devDependency).

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vadxq/vite-plugin-vconsole ↗

packagehttps://www.npmjs.com/package/vite-plugin-vconsole ↗