Helper for enabling vue devtools for production builds

detect_vue.js

// ==UserScript==
// @name         VueEnableDevtools
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Add helper for enabling vue devtools for production builds
// @source       https://gist.github.com/Kolobok12309/685d00c8e51dbd3e450909238836575d
// @author       Kolobok12309
// @include      *
// @grant        unsafeWindow
// ==/UserScript==

(function(global) {
    'use strict';

    global.__enableVueDevTools__ = function() {
        let vueDetected = false;
        const nuxtDetected = Boolean(global.__NUXT__ || global.$nuxt);
        let vueInstance = null;

        if (nuxtDetected) {
          vueDetected = true;
          vueInstance = global.$nuxt;
        } else {
          const all = document.querySelectorAll('*');
          let el;
          for (let elem of all) {
            if (elem.__vue__) {
              el = elem;
              break;
            }
          }

          if (el) {
            vueDetected = true;
            vueInstance = el.__vue__.$root;
          }
        }

        if (!vueDetected) throw new Error('Vue not detected');
        if (!global.__VUE_DEVTOOLS_GLOBAL_HOOK__) throw new Error('VUE_DEVTOOLS_GLOBAL_HOOK not found')

        const Vue = vueInstance.constructor;

        Vue.config.devtools = true;
        Vue.config.productionTip = true;

        global.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = Vue;

        global.postMessage({
            devtoolsEnabled: vueDetected,
            vueDetected,
            nuxtDetected,
          }, '*');
        
        return {
          Vue,
          vueInstance,
          vueDetected,
          nuxtDetected,
        };
      };
})(unsafeWindow)