Vue

The @domscribe/vue package provides Vue 3 VNode resolution, Composition API and Options API support, and bundler plugins for Vite and Webpack.

Install

npm install -D @domscribe/vue

Vite Setup

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { domscribe } from '@domscribe/vue/vite';

export default defineConfig({
  plugins: [vue(), domscribe()],
});

Webpack Setup

Webpack requires both a loader (for AST transformation) and a plugin (for relay and overlay coordination):

// webpack.config.js
const { DomscribeWebpackPlugin } = require('@domscribe/vue/webpack');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        enforce: 'pre',
        use: [
          {
            loader: '@domscribe/transform/webpack-loader',
            options: { enabled: isDevelopment },
          },
        ],
      },
    ],
  },
  plugins: [
    new DomscribeWebpackPlugin({
      enabled: isDevelopment,
      overlay: true,
    }),
  ],
};

Supported Versions

Vue 3+ (Composition API and Options API)
Vite 5 - 7
Webpack 5

Plugin Options

The Vue plugin extends the base transform options with runtime and capture namespaces:

domscribe({
  // Base transform options
  include: /\.(jsx|tsx|vue)$/,
  exclude: /node_modules/,
  debug: false,
  relay: { autoStart: true, port: 0, host: '127.0.0.1' },
  overlay: true,

  // Vue-specific
  runtime: { /* ... */ },
  capture: { /* ... */ },
})

Runtime Options

Option	Type	Default	Description
`phase`	`1 \| 2`	`1`	Feature phase gate. Phase 1: props/state. Phase 2: events/perf.
`redactPII`	`boolean`	`true`	Redact sensitive values in captured data.
`blockSelectors`	`string[]`	`[]`	CSS selectors to exclude from capture.

Capture Options

Option	Type	Default	Description
`maxTreeDepth`	`number`	`50`	Maximum component tree depth to traverse.

How It Works

The Vue adapter accesses component instances via the __vueParentComponent property that Vue 3 attaches to DOM elements. From each component instance, it extracts:

Props -- the component's declared and received props
State -- setupState for Composition API components, or data for Options API components
Component name -- resolved from the component definition
Component tree -- parent/child relationships for hierarchical inspection

Both Composition API and Options API components are fully supported. The adapter detects the component style automatically and extracts data accordingly.

Adapter Options

The underlying VueAdapter accepts these options:

Option	Type	Default	Description
`maxTreeDepth`	`number`	`50`	Maximum depth to traverse the component tree.
`debug`	`boolean`	`false`	Enable debug logging.

Subpath Exports

@domscribe/vue/vite -- Vite plugin with Vue adapter
@domscribe/vue/webpack -- Webpack plugin with Vue adapter
@domscribe/vue/auto-init -- Auto-initialization module