vuejs/devtools-v6 · warning

[Vue Devtools] No hook in parent window

Error message

[Vue Devtools] No hook in parent window

What it means

sendToParent tries to communicate with `window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__` when the backend runs inside an iframe. When the parent exists but has no devtools hook installed, it logs this warning instead of throwing, so the message is silently dropped. It means devtools UI will not receive events from the iframe app.

Source

Thrown at packages/app-backend-core/src/hook.ts:78

  if (Object.prototype.hasOwnProperty.call(target, '__VUE_DEVTOOLS_GLOBAL_HOOK__')) {
    if (target.__VUE_DEVTOOLS_GLOBAL_HOOK__.devtoolsVersion !== devtoolsVersion) {
      console.error(`Another version of Vue Devtools seems to be installed. Please enable only one version at a time.`)
    }
    return
  }

  let hook

  if (isIframe) {
    const sendToParent = (cb) => {
      try {
        const hook = (window.parent as any).__VUE_DEVTOOLS_GLOBAL_HOOK__
        if (hook) {
          return cb(hook)
        }
        else {
          console.warn('[Vue Devtools] No hook in parent window')
        }
      }
      catch (e) {
        console.warn('[Vue Devtools] Failed to send message to parent window', e)
      }
    }

    hook = {
      devtoolsVersion,
      // eslint-disable-next-line accessor-pairs
      set Vue(value) {
        sendToParent((hook) => {
          hook.Vue = value
        })
      },

      // eslint-disable-next-line accessor-pairs
      set enabled(value) {

View on GitHub (pinned to dd2ab5d427)

Solutions

  1. Ensure the parent window loads the Vue devtools backend/extension so `__VUE_DEVTOOLS_GLOBAL_HOOK__` exists before the iframe app initializes.
  2. If the app is not meant to run in an iframe, avoid the iframe embedding or detect `window.parent === window` and skip parent communication.
  3. For custom hosting pages, create the hook in the parent first (e.g. by importing the hook package) before loading the iframe app.
  4. Treat the warning as benign if devtools features in the parent are not needed; the app itself is unaffected.
Defensive patterns

Strategy: fallback

Validate before calling

const hasParentHook = window.parent !== window && !!(window.parent).__VUE_DEVTOOLS_GLOBAL_HOOK__

Type guard

function parentHasHook() {
  try { return window.parent !== window && typeof (window.parent as any).__VUE_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' }
  catch { return false }
}

Prevention

When it happens

Trigger: The app backend runs in an iframe whose parent window does not have `__VUE_DEVTOOLS_GLOBAL_HOOK__` installed — i.e. no devtools extension/backend script in the parent, or the parent is a different origin/setup without the hook. Any sendToParent call (on/off/emit/Vue wrapper) then warns.

Common situations: Embedding a Vue app in an iframe inside a page that doesn't run devtools backend; cross-origin iframes where the hook can't be accessed; loading the app standalone but code still assumes an iframe host; devtools extension disabled in the parent context.

Related errors


AI-assisted analysis of vuejs/devtools-v6@dd2ab5d427 (2026-08-31). Data as JSON: /api/errors/2d4c5960fbecd256. Report an issue: GitHub.