feat(vue): support experimental.componentDetection

[benjamincanac]

🔗 Linked issue

Relates to #6296

❓ Type of change

• ✨ New feature (a non-breaking change that adds functionality)

📚 Description

Ports experimental.componentDetection to the Vue (unplugin) integration. It already exists for Nuxt, but the Vue build always shipped the theme CSS of every component even if the app used one.

Detection runs in the plugin's config hook and the unused components' theme files are written with every class blanked, reusing the theme.unstyled machinery. Blanking now also covers base-shaped themes (a top-level base string, e.g. Skeleton), which applyUnstyled used to miss, the same hole affected theme.unstyled on v4, and applyUnstyled no longer mutates the shared theme objects it blanks. The files still exist with their variant declarations intact, so the #build/ui tsconfig aliases, components.d.ts prop types and direct imports keep working, they just contribute no CSS. Stays opt-in in v4.

Narrowing the emitted @source list instead doesn't work: the templates live in node_modules/.nuxt-ui, where Tailwind widens a file @source to a scan of its whole parent directory, so @source "./ui/button.ts"; compiles byte-identical CSS to @source "./ui";. Blanking the files sidesteps that without any extra directive, and ui.css stays the same with detection on or off. The Nuxt integration is untouched, it narrows its @source list in .nuxt where this widening doesn't apply.

Measured on nuxt-ui-templates/starter-vue (29 components detected):

build	CSS	gzip
detection off	187.53 kB	24.72 kB
detection on	84.15 kB	12.25 kB

test/utils/components.spec.ts unit tests the detection and dependency resolution.

Important

Two things for review: the doc badge is a placeholder Soon, please set it to the real target release. And newly used components are only picked up on the next dev-server start (documented as a restart note); live HMR re-detection is left as a follow-up.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The changes document experimental.componentDetection, pass Vue root and component directory data through template generation, and generate sources from detected components. Extra scan directories support packages and external component directories. Detection excludes nested node_modules, .nuxt, dist, and declaration files. Theme handling now clears unstyled base classes without mutating shared theme objects. Tests cover detection, directory resolution, and theme generation.

Estimated code review effort: 3 (Moderate) | ~25 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely identifies the main change: adding Vue support for experimental.componentDetection.
Description check	✅ Passed	The description directly explains the component detection feature, its CSS behavior, limitations, tests, and documentation changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch perf/component-detection-vue

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6731

commit: 8e9434b

[codspeed-hq]

Merging this PR will not alter performance

✅ 31 untouched benchmarks

---

_{Comparing perf/component-detection-vue (8e9434b) with v4 (0a2dc08)}

[benjamincanac]

@codspeedbot retry

[codspeed-hq]

@codspeedbot retry

• Warming up the performance wizard...
• Inspecting CodSpeed runs — Found a fresh head run and a completed base run on v4 (4200e80)
• Re-running the benchmarks job — The GitHub App token cannot re-run GitHub Actions jobs (403), so the CI job could not be re-triggered
• Re-measuring the flagged benchmark locally — Re-ran tv.bench in simulation mode on head and base on identical hardware: all 9 benchmarks unchanged, the flagged regression does not reproduce
• Handling comment — Comment handling finished successfully

_{Was this response helpful? React with 👍 or 👎 to help us improve CodSpeedBot.}