{"id":12621,"library":"vue-vconsole-devtools","title":"vConsole Vue DevTools Plugin","description":"vue-vconsole-devtools is a specialized plugin designed to embed the official Vue.js DevTools directly into vConsole, a lightweight front-end developer tool primarily used for debugging mobile web pages. This enables developers to inspect Vue component states, props, events, and Vuex/Pinia stores directly within a mobile browser's vConsole interface, obviating the need for a desktop browser's Vue DevTools extension. The current stable version is 1.0.9. Releases are infrequent, focusing on compatibility fixes with newer versions of vConsole and Vue DevTools. Its key differentiator is providing a fully integrated Vue debugging experience in environments where traditional browser extensions are unavailable or impractical, such as WebView or mobile Safari/Chrome without remote debugging capabilities. It is framework-agnostic for its vConsole integration but specifically targets Vue.js applications for its debugging capabilities.","status":"active","version":"1.0.9","language":"javascript","source_language":"en","source_url":"https://github.com/Zippowxk/vue-vconsole-devtools","tags":["javascript","vue-devtools","vConsole","vconsole","vue","debug","vue.js","plugin"],"install":[{"cmd":"npm install vue-vconsole-devtools","lang":"bash","label":"npm"},{"cmd":"yarn add vue-vconsole-devtools","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-vconsole-devtools","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, as this is a Vue.js debugging tool.","package":"vue","optional":false},{"reason":"Runtime dependency; the plugin integrates into vConsole's interface.","package":"vconsole","optional":false},{"reason":"Integrates core logic from the official Vue DevTools, often a peer or indirect dependency.","package":"@vue/devtools","optional":true}],"imports":[{"note":"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.","wrong":"import VConsoleDevtools from 'vue-vconsole-devtools';","symbol":"initPlugin","correct":"import { initPlugin } from 'vue-vconsole-devtools';"},{"note":"vConsole itself is typically imported as a default export in ES Modules environments.","wrong":"const VConsole = require('vconsole');","symbol":"VConsole","correct":"import VConsole from 'vconsole';"},{"note":"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.","wrong":"const Vue = require('vue');","symbol":"Vue","correct":"import Vue from 'vue';"}],"quickstart":{"code":"import Vue from 'vue';\nimport VConsole from 'vconsole';\nimport { initPlugin } from 'vue-vconsole-devtools';\n\n// 1. Initialize vConsole first\nconst vConsole = new VConsole();\n\n// 2. Initialize the vue-vconsole-devtools plugin\n// This must be called before creating your Vue root instance.\ninitPlugin(vConsole);\n\n// 3. For Vue 2.x, ensure devtools is enabled and emit the global hook\n// This makes Vue DevTools aware of your Vue instance. \n// This step is crucial for the plugin to detect your Vue application.\nVue.config.devtools = true;\nif (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {\n  window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit(\"init\", Vue);\n}\n\n// 4. Create your Vue application\nconst app = new Vue({\n  data() {\n    return {\n      message: 'Hello vConsole Vue DevTools!',\n      counter: 0\n    };\n  },\n  template: `\n    <div>\n      <h1>{{ message }}</h1>\n      <button @click=\"counter++\">Increment: {{ counter }}</button>\n      <p>Check the vConsole panel for Vue DevTools tab.</p>\n    </div>\n  `\n});\n\napp.$mount('#app');\n\n// Optional: Append a root element for the Vue app if not already in HTML\nif (!document.getElementById('app')) {\n  const el = document.createElement('div');\n  el.id = 'app';\n  document.body.appendChild(el);\n}\n\nconsole.log('vConsole and Vue DevTools plugin initialized. Look for the \"Vue\" tab in vConsole.');","lang":"typescript","description":"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."},"warnings":[{"fix":"Upgrade 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`.","message":"When using Webpack, bundling issues might cause `process` environment variables to be inaccessible, leading to runtime errors. This was particularly prevalent in earlier versions.","severity":"breaking","affected_versions":"<1.0.9"},{"fix":"Upgrade `vue-vconsole-devtools` to version 1.0.8 or newer. Ensure your `vconsole` dependency is also up-to-date to resolve underlying compatibility issues.","message":"Older 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.","severity":"gotcha","affected_versions":">=1.0.5 <1.0.8 (when used with vConsole 3.14.6)"},{"fix":"Upgrade to version 1.0.8 or newer to benefit from Safari compatibility fixes.","message":"Initial versions of the plugin might have had compatibility issues with Safari browsers, preventing the DevTools panel from opening correctly.","severity":"gotcha","affected_versions":"<1.0.8"},{"fix":"Ensure `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.","message":"For 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.","severity":"gotcha","affected_versions":"All versions (Vue 2.x specific)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Update 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.","cause":"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.","error":"ReferenceError: process is not defined"},{"fix":"Ensure 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.","cause":"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.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'contentWindow')"},{"fix":"For 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.","cause":"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.","error":"Vue DevTools tab is not visible or shows 'No Vue app detected.' in vConsole"}],"ecosystem":"npm"}