Helper for enabling vue devtools for production builds

detect_vue.js

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

(function(global) {
    'use strict';

    const vue2Enabler = () => {
        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,
        };
    }

    const vue3Enabler = () => {
      const app = Array.from(document.querySelectorAll('*')).find((e) => e.__vue_app__).__vue_app__
      const version = app.version
      const devtools = global.__VUE_DEVTOOLS_GLOBAL_HOOK__
      devtools.enabled = true
      devtools.emit('app:init', app, version, {});

      return app;
    }

    const checkers = [vue2Enabler, vue3Enabler];

    global.__enableVueDevTools__ = function() {
        for (const checker of checkers) {
          try {
            const res = checker();

            console.log('Vue found')

            return res;
          } catch (err) {
            console.error(err);
            continue;
          }
        }

        throw new Error('Vue not found');
    };
})(unsafeWindow)