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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
initPlugin
✓ import { initPlugin } from 'vue-vconsole-devtools';
✗ import VConsoleDevtools from 'vue-vconsole-devtools';
The primary entry point is a named export `initPlugin`, not a default export. It needs to be called before the Vue app instance is created.
VConsole
✓ import VConsole from 'vconsole';
✗ const VConsole = require('vconsole');
vConsole itself is typically imported as a default export in ES Modules environments.
Vue
✓ import Vue from 'vue';
✗ const Vue = require('vue');
For Vue 2.x, it's a default export. Ensure Vue.config.devtools is set to true and the global hook is emitted for the plugin to function correctly.
This quickstart demonstrates how to set up `vue-vconsole-devtools` with `vConsole` and a basic Vue 2.x application, ensuring that Vue DevTools is correctly initialized and available within the vConsole interface.
import Vue from 'vue';
import VConsole from 'vconsole';
import { initPlugin } from 'vue-vconsole-devtools';
// 1. Initialize vConsole first
const vConsole = new VConsole();
// 2. Initialize the vue-vconsole-devtools plugin
// This must be called before creating your Vue root instance.
initPlugin(vConsole);
// 3. For Vue 2.x, ensure devtools is enabled and emit the global hook
// This makes Vue DevTools aware of your Vue instance.
// This step is crucial for the plugin to detect your Vue application.
Vue.config.devtools = true;
if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", Vue);
}
// 4. Create your Vue application
const app = new Vue({
data() {
return {
message: 'Hello vConsole Vue DevTools!',
counter: 0
};
},
template: `
<div>
<h1>{{ message }}</h1>
<button @click="counter++">Increment: {{ counter }}</button>
<p>Check the vConsole panel for Vue DevTools tab.</p>
</div>
`
});
app.$mount('#app');
// Optional: Append a root element for the Vue app if not already in HTML
if (!document.getElementById('app')) {
const el = document.createElement('div');
el.id = 'app';
document.body.appendChild(el);
}
console.log('vConsole and Vue DevTools plugin initialized. Look for the "Vue" tab in vConsole.');
Debug
Known issues
breakingWhen using Webpack, bundling issues might cause `process` environment variables to be inaccessible, leading to runtime errors. This was particularly prevalent in earlier versions.fixUpgrade to version 1.0.9 or newer. Ensure your Webpack configuration correctly handles Node.js globals like `process` in browser environments, for example, by providing fallbacks or defining `process.env.NODE_ENV`.
affects: <1.0.9
gotchaOlder versions of vConsole (specifically 3.14.6) could lead to an issue where `contentWindow` was not found when the plugin attempted to interact with vConsole's iframe, making the DevTools non-functional.fixUpgrade `vue-vconsole-devtools` to version 1.0.8 or newer. Ensure your `vconsole` dependency is also up-to-date to resolve underlying compatibility issues.
affects: >=1.0.5 <1.0.8 (when used with vConsole 3.14.6)
gotchaInitial versions of the plugin might have had compatibility issues with Safari browsers, preventing the DevTools panel from opening correctly.fixUpgrade to version 1.0.8 or newer to benefit from Safari compatibility fixes.
affects: <1.0.8
gotchaFor Vue 2.x applications, `Vue.config.devtools` must be explicitly set to `true`, and the `window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', Vue)` call is necessary for the plugin to detect and hook into your Vue application. Without this, the 'Vue' tab might not appear or might not show application details.fixEnsure `Vue.config.devtools = true;` is set and `window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", Vue);` is called *before* mounting your root Vue instance, typically in your main entry file. affects: All versions (Vue 2.x specific)
Errors
Common errors & fixes
ReferenceError: process is not defined
Webpack or other bundlers might not correctly shim or define Node.js globals like `process` for browser environments, which the plugin might have relied on in older versions.
fixUpdate to `vue-vconsole-devtools` v1.0.9 or later. If the issue persists, configure your bundler (e.g., Webpack's `ProvidePlugin` or `DefinePlugin`) to define `process.env.NODE_ENV` or provide a `process` shim.
Uncaught TypeError: Cannot read properties of undefined (reading 'contentWindow')
This error typically indicates that the `vue-vconsole-devtools` plugin is trying to access the `contentWindow` property of vConsole's iframe, but the iframe element or its content is not yet available or incorrectly referenced, often due to a vConsole version mismatch.
fixEnsure both `vconsole` and `vue-vconsole-devtools` are updated to their latest stable versions (e.g., `vue-vconsole-devtools` >= 1.0.8). Verify that `vConsole` is initialized and ready *before* `initPlugin` is called.
Vue DevTools tab is not visible or shows 'No Vue app detected.' in vConsole
The Vue DevTools global hook was not properly initialized or Vue's devtools flag is off, preventing the plugin from connecting to the Vue instance.
fixFor Vue 2.x, add `Vue.config.devtools = true;` and `window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", Vue);` *before* creating your root Vue application instance. For Vue 3, ensure `@vue/devtools` is correctly set up for your build environment to enable detection. Audit
Dependencies
vuerequiredPeer dependency, as this is a Vue.js debugging tool.
vconsolerequiredRuntime dependency; the plugin integrates into vConsole's interface.
@vue/devtoolsoptionalIntegrates core logic from the official Vue DevTools, often a peer or indirect dependency.