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 emitted @source "./ui", so Tailwind scanned all ~163 generated theme files and every app shipped CSS for every component even if it used one.

With detection enabled, the plugin scans the Vite root for used components and narrows the emitted @source lines to just those components and their dependencies. In an isolated single-UButton app this cuts the theme CSS from 179 KB to 45 KB (75%). Stays opt-in in v4.

The shared generateSources change keeps the Nuxt output byte-identical (layer and inline sources stay Nuxt-only, the detection branch is equivalent). Full suite passes with zero snapshot changes, and a new test/utils/component-detection.spec.ts covers the narrowing, the disabled default, and the empty-detection fallback.

Stacked on #6730.

Important

Two things for review: the doc badge is a placeholder 4.10+, 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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 4530c9b1-cbfb-4dea-b8a0-d00bd9f73b6b

📥 Commits

Reviewing files that changed from the base of the PR and between 44a094c and 08eb9e7.

📒 Files selected for processing (3)

• playgrounds/vue/tsconfig.app.json
• src/plugins/templates.ts
• src/templates.ts

---

📝 Walkthrough

Walkthrough

The changes document experimental.componentDetection, thread Vue root and component directory data through template generation, and generate source directives from detected components. Extra scan directories support packages and external component directories. Detection ignores nested node_modules, .nuxt, and dist directories. Tests cover detection, dependency inclusion, lazy components, package scans, and directory resolution.

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 identifies the main change: adding experimental.componentDetection support to the Vue integration.
Description check	✅ Passed	The description directly explains the Vue component detection feature, its performance impact, testing, documentation, and known restart limitation.
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: 08eb9e7

[codspeed-hq]

Merging this PR will not alter performance

✅ 31 untouched benchmarks

---

_{Comparing perf/component-detection-vue (08eb9e7) with v4 (4200e80)}

[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.}