feat(ui): support Vite+ vp package manager commands

[duowb]

🔗 Linked issue

resolves #2418

🧭 Context

Add viteplus as a package manager

📚 Description

add viteplus command

Since no Viteplus icon was found, the Vite icon was used instead.

Thank you for your guidance. Please point out any shortcomings in the testing.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 10, 2026 3:08am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 10, 2026 3:08am
npmx-lunaria	Ignored		Apr 10, 2026 3:08am

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adds support for viteplus (vp) as a new package manager to the codebase. Changes include updating CSS visibility rules in three component files to display vp options alongside existing package managers, adding a new vp entry to the package managers configuration with associated command templates (exec, dlx, create) and icon references, expanding the valid package manager ID allowlist during prehydration, and extending unit test coverage to validate command generation across various scenarios for the new package manager.

Suggested reviewers

• danielroe
• alexdln

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the addition of viteplus as a package manager.
Linked Issues check	✅ Passed	The pull request fully addresses the requirements from issue #2418 by adding viteplus as a package manager with proper command templates and UI support.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to adding viteplus support; no unrelated modifications are present.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

app/utils/prehydrate.ts (1)

24-24: Consider a small regression test for prehydrated 'vp' selection.

This allowlist is a key guard; a focused test that persists "vp" and asserts dataset.pm === 'vp' would help prevent future drift.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 95e49d16-5312-4c35-89d4-f33075aa6571

📥 Commits

Reviewing files that changed from the base of the PR and between fd7703c and 679fc56.

📒 Files selected for processing (6)

• app/components/Package/ManagerSelect.vue
• app/components/Terminal/Execute.vue
• app/components/Terminal/Install.vue
• app/utils/install-command.ts
• app/utils/prehydrate.ts
• test/unit/app/utils/install-command.spec.ts

[serhalp]

LGTM

[serhalp]

LGTM, per https://viteplus.dev/guide/install#managing-dependencies, https://viteplus.dev/guide/create, https://viteplus.dev/guide/vpx

[github-actions]

Thanks for your first contribution, @duowb! 🙌

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.