{"id":18912,"library":"vue-inspector-agnostic","title":"vue-inspector-agnostic","description":"A Vue inspector plugin that works with any bundler (Vite, Webpack, etc.) by injecting a component overlay triggered by pressing 'k'. Version 1.0.0. Unlike vite-plugin-vue-inspector which is Vite-only, this package uses a Vue plugin approach for universal compatibility. Best for debugging Vue apps in development mode, indicated by page title containing '[dev]'.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/mzaini30/vue-inspector","tags":["javascript","vue","vue-inspector"],"install":[{"cmd":"npm install vue-inspector-agnostic","lang":"bash","label":"npm"},{"cmd":"yarn add vue-inspector-agnostic","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-inspector-agnostic","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue app usage","package":"vue","optional":false}],"imports":[{"note":"The package exports a default function that is used as a Vue plugin.","wrong":"import { inspector } from 'vue-inspector-agnostic'","symbol":"default import (inspector)","correct":"import inspector from 'vue-inspector-agnostic'"},{"note":"Use it as a plugin with .use() on the Vue app instance.","wrong":"app.use(inspector())","symbol":"Vue plugin usage (app.use)","correct":"app.use(inspector)"},{"note":"The package is ESM-first; for CJS, access .default.","wrong":"const inspector = require('vue-inspector-agnostic')","symbol":"CommonJS require","correct":"const inspector = require('vue-inspector-agnostic').default"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport inspector from 'vue-inspector-agnostic';\n\nconst app = createApp(App);\napp.use(inspector);\napp.mount('#app');","lang":"javascript","description":"Demonstrates basic setup: import the default inspector, install it as a Vue plugin, and mount the app. Press 'k' to toggle the inspector."},"warnings":[{"fix":"Ensure your app sets document.title = '[dev] Your App' in development mode.","message":"Inspector only activates when page title contains '[dev]' at the start. If title is missing or different, inspector won't work.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Avoid using 'k' for other actions in your app, or fork the package.","message":"Hotkey 'k' conflicts with other keyboard shortcuts. It cannot be changed without modifying the source.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Accept default behavior or fork the package for custom needs.","message":"No configuration options available. The inspector works out-of-the-box with no customization.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install vue-inspector-agnostic' and ensure it's in package.json.","cause":"Package not installed or npm cache issue.","error":"Cannot find module 'vue-inspector-agnostic'"},{"fix":"Use 'import inspector from 'vue-inspector-agnostic'' instead of named import or require without .default.","cause":"Using wrong import style; default import expected.","error":"Uncaught TypeError: inspector is not a function"},{"fix":"Ensure you call 'app.use(inspector)' after creating the app and before mounting.","cause":"Inspector not correctly registered as a plugin.","error":"[Vue warn]: Failed to resolve component: inspector-layer"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}