import { createApp } from 'vue';
import { createDevLensPlugin } from '@devlens/vue';

const app = createApp(App);

app.use(createDevLensPlugin({
  enabled: true,
  minSeverity: 'warn',
}));

app.mount('#app');

The plugin automatically installs app.config.errorHandler and app.config.warnHandler to capture Vue errors and warnings.

Guarded Ref

Reactive ref with null/undefined detection:

import { useGuardedRef } from '@devlens/vue';

const user = useGuardedRef(initialUser, 'UserProfile');

// Accessing null/undefined properties on user.value triggers detection

Watch Data

Monitor data for null/undefined values:

import { useGuardedWatch } from '@devlens/vue';

useGuardedWatch({ user, posts, settings }, 'Dashboard');

// [RENDER] DevLens [WARN] render-data: "posts" is undefined in Dashboard

API Reference

Export	Description
`createDevLensPlugin(options?)`	Vue 3 plugin with auto error/warn handlers
`useDevLens()`	Inject the engine instance
`useGuardedRef(initialValue, label?)`	Reactive ref with null/undefined detection
`useGuardedWatch(data, label?)`	Watch data for null/undefined