@nuxie/tagger

A Vite plugin that automatically tags React components with metadata attributes for the Nuxie visual editor.

This package is a fork of lovable-tagger by Lovable, enhanced with additional features for detecting dynamic class names.

Installation

npm install -D @nuxie/tagger
# or
yarn add -D @nuxie/tagger
# or
bun add -D @nuxie/tagger

Usage

Add the plugin to your vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { componentTagger } from '@nuxie/tagger'

export default defineConfig({
  plugins: [
    react(),
    componentTagger()
  ]
})

What it does

This plugin automatically adds data attributes to React components during build time:

• data-nux-id: Unique identifier for the component (file:line:column)
• data-nux-name: Component element name
• data-nux-content: JSON-encoded content metadata (className, text, placeholder)
• data-nux-dynamic-class: Marks elements with dynamic className expressions
• data-nux-class-expr: The original className expression for dynamic classes

Example

Input:

<div className={isActive ? 'active' : 'inactive'}>
  Hello World
</div>

Output:

<div 
  className={isActive ? 'active' : 'inactive'}
  data-nux-id="src/App.tsx:10:2"
  data-nux-name="div"
  data-nux-dynamic-class="true"
  data-nux-class-expr="isActive%20%3F%20'active'%20%3A%20'inactive'"
  data-nux-content="%7B%22text%22%3A%22Hello%20World%22%7D"
>
  Hello World
</div>

License

MIT