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]

📝 Walkthrough

Walkthrough

The changes add Vue component detection configuration documentation, thread Vue root and component directory information through template generation, and generate source directives from detected components. Extra scan directories now support packages, external component directories, and nested path handling. Component detection ignores nested node_modules, .nuxt, and dist directories. New 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
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.
Title check	✅ Passed	The title clearly matches the main change: adding Vue support for experimental.componentDetection.
Description check	✅ Passed	The description is clearly about the same Vue component-detection feature and its documentation/tests.

✨ 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: 42cc0f5