vue-inspector-agnostic

1.0.0 verified Sat Apr 25 auth: no javascript

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

Common errors

error Cannot find module 'vue-inspector-agnostic' ↓

cause Package not installed or npm cache issue.

fix

Run 'npm install vue-inspector-agnostic' and ensure it's in package.json.

error Uncaught TypeError: inspector is not a function ↓

cause Using wrong import style; default import expected.

fix

Use 'import inspector from 'vue-inspector-agnostic'' instead of named import or require without .default.

error [Vue warn]: Failed to resolve component: inspector-layer ↓

cause Inspector not correctly registered as a plugin.

fix

Ensure you call 'app.use(inspector)' after creating the app and before mounting.

Warnings

gotcha Inspector only activates when page title contains '[dev]' at the start. If title is missing or different, inspector won't work. ↓

fix Ensure your app sets document.title = '[dev] Your App' in development mode.

gotcha Hotkey 'k' conflicts with other keyboard shortcuts. It cannot be changed without modifying the source. ↓

fix Avoid using 'k' for other actions in your app, or fork the package.

gotcha No configuration options available. The inspector works out-of-the-box with no customization. ↓

fix Accept default behavior or fork the package for custom needs.

Install

npm install vue-inspector-agnostic

yarn add vue-inspector-agnostic

pnpm add vue-inspector-agnostic

Imports

default import (inspector)
wrong
```
import { inspector } from 'vue-inspector-agnostic'
```
correct
```
import inspector from 'vue-inspector-agnostic'
```
The package exports a default function that is used as a Vue plugin.
Vue plugin usage (app.use)
wrong
```
app.use(inspector())
```
correct
```
app.use(inspector)
```
Use it as a plugin with .use() on the Vue app instance.

CommonJS require

wrong

const inspector = require('vue-inspector-agnostic')

correct

const inspector = require('vue-inspector-agnostic').default

The package is ESM-first; for CJS, access .default.

Quickstart

Demonstrates basic setup: import the default inspector, install it as a Vue plugin, and mount the app. Press 'k' to toggle the inspector.

import { createApp } from 'vue';
import App from './App.vue';
import inspector from 'vue-inspector-agnostic';

const app = createApp(App);
app.use(inspector);
app.mount('#app');