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

Capture Options

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:

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