vConsole Vue DevTools Plugin

Common errors

• ReferenceError: process is not defined

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

• Uncaught TypeError: Cannot read properties of undefined (reading 'contentWindow')

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

• Vue DevTools tab is not visible or shows 'No Vue app detected.' in vConsole

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

Warnings

• breaking When using Webpack, bundling issues might cause `process` environment variables to be inaccessible, leading to runtime errors. This was particularly prevalent in earlier versions.
  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`.
• gotcha 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.
  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.
• gotcha Initial versions of the plugin might have had compatibility issues with Safari browsers, preventing the DevTools panel from opening correctly.
  Fix: Upgrade to version 1.0.8 or newer to benefit from Safari compatibility fixes.
• gotcha 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.
  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.

Install

• npm install vue-vconsole-devtools npm
• yarn add vue-vconsole-devtools yarn
• pnpm add vue-vconsole-devtools pnpm

Imports

• initPlugin
  wrong:

  import VConsoleDevtools from 'vue-vconsole-devtools';

  correct:

  import { initPlugin } 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
  wrong:

  const VConsole = require('vconsole');

  correct:

  import VConsole from 'vconsole';

  vConsole itself is typically imported as a default export in ES Modules environments.
• Vue
  wrong:

  const Vue = require('vue');

  correct:

  import Vue from '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.

Quickstart

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