# Vue

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

## Install

```bash
npm install -D @domscribe/vue
```

## Vite Setup

```ts
// 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):

```js
// 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:

```ts
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