vite-plugin-dom-locator

A Vite plugin for DOM element source location tracking. This plugin helps you locate DOM elements in your source code during development.

Features

• Support for Vue 3 components
• Support for React components (JSX/TSX)
• Automatic source location tracking
• Customizable configuration

Installation

npm install vite-plugin-dom-locator
# or
yarn add vite-plugin-dom-locator
# or
pnpm add vite-plugin-dom-locator

Usage

// vite.config.js
import { defineConfig } from "vite";
import { mgxDevDomPlugin } from "vite-plugin-dom-locator";
import vue from "@vitejs/plugin-vue"; // for Vue projects
import react from "@vitejs/plugin-react"; // for React projects

export default defineConfig({
  plugins: [
    // For Vue projects, use after vue() plugin
    vue(),
    mgxDevDomPlugin({
      // options
    }),

    // For React projects, use before react() plugin
    mgxDevDomPlugin({
      // options
    }),
    react(),
  ],
});

Important: Plugin ordering matters:

• For Vue projects: Use mgxDevDomPlugin after vue() plugin
• For React projects: Use mgxDevDomPlugin before react() plugin

Options

interface PluginOptions {
  // Directories to include (default: ['src'])
  include?: string[];

  // Prefix for data attributes (default: 'locator')
  prefix?: string;

  // Enable/disable the plugin (default: true)
  enable?: boolean;
}

Example

Input:

<template>
  <div>Hello World</div>
</template>

Output:

<template>
  <div data-locator-path="src/components/Hello.vue" data-locator-line="2">Hello World</div>
</template>