Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
serhalp merged 3 commits into from
Apr 10, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c104c8
fix(ui): Add viteplus as a package manager
duowb Apr 9, 2026
5b29e80
Merge branch 'npmx-dev:main' into main
duowb Apr 9, 2026
679fc56
fix(ui): add viteplus to prehydrate and tests
Apr 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion app/components/Package/ManagerSelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,8 @@ function handleKeydown(event: KeyboardEvent) {
:root[data-pm='yarn'] [data-pm-select='yarn'],
:root[data-pm='bun'] [data-pm-select='bun'],
:root[data-pm='deno'] [data-pm-select='deno'],
:root[data-pm='vlt'] [data-pm-select='vlt'] {
:root[data-pm='vlt'] [data-pm-select='vlt'],
:root[data-pm='vp'] [data-pm-select='vp'] {
display: inline-block;
}

Expand Down
3 changes: 2 additions & 1 deletion app/components/Terminal/Execute.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,8 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
:root[data-pm='yarn'] [data-pm-cmd='yarn'],
:root[data-pm='bun'] [data-pm-cmd='bun'],
:root[data-pm='deno'] [data-pm-cmd='deno'],
:root[data-pm='vlt'] [data-pm-cmd='vlt'] {
:root[data-pm='vlt'] [data-pm-cmd='vlt'],
:root[data-pm='vp'] [data-pm-cmd='vp'] {
display: flex;
}

Expand Down
3 changes: 2 additions & 1 deletion app/components/Terminal/Install.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -412,7 +412,8 @@ useCommandPaletteContextCommands(
:root[data-pm='yarn'] [data-pm-cmd='yarn'],
:root[data-pm='bun'] [data-pm-cmd='bun'],
:root[data-pm='deno'] [data-pm-cmd='deno'],
:root[data-pm='vlt'] [data-pm-cmd='vlt'] {
:root[data-pm='vlt'] [data-pm-cmd='vlt'],
:root[data-pm='vp'] [data-pm-cmd='vp'] {
display: flex;
}

Expand Down
9 changes: 9 additions & 0 deletions app/utils/install-command.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,15 @@ export const packageManagers = [
create: 'vlx',
icon: 'i-custom-vlt',
},
{
id: 'vp',
label: 'vp',
action: 'add',
executeLocal: 'vp exec',
executeRemote: 'vp dlx',
create: 'vp create',
Comment on lines +65 to +68
Copy link
Copy Markdown
Member

@serhalp serhalp Apr 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

icon: 'i-simple-icons:vite',
},
] as const

export type PackageManagerId = (typeof packageManagers)[number]['id']
Expand Down
2 changes: 1 addition & 1 deletion app/utils/prehydrate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function initPreferencesOnPrehydrate() {
] satisfies typeof ACCENT_COLOR_IDS)

// Valid package manager IDs
const validPMs = new Set(['npm', 'pnpm', 'yarn', 'bun', 'deno', 'vlt'])
const validPMs = new Set(['npm', 'pnpm', 'yarn', 'bun', 'deno', 'vlt', 'vp'])

// Read settings from localStorage
const settings = JSON.parse(
Expand Down
12 changes: 12 additions & 0 deletions test/unit/app/utils/install-command.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ describe('install command generation', () => {
['bun', 'lodash'],
['deno', 'npm:lodash'],
['vlt', 'lodash'],
['vp', 'lodash'],
] as const)('%s → %s', (pm, expected) => {
expect(
getPackageSpecifier({
Expand All @@ -54,6 +55,7 @@ describe('install command generation', () => {
['bun', '@trpc/server'],
['deno', 'jsr:@trpc/server'], // Native JSR specifier preferred
['vlt', '@trpc/server'],
['vp', '@trpc/server'],
] as const)('%s → %s', (pm, expected) => {
expect(
getPackageSpecifier({
Expand All @@ -73,6 +75,7 @@ describe('install command generation', () => {
['bun', '@vue/shared'],
['deno', 'npm:@vue/shared'], // Falls back to npm: compat
['vlt', '@vue/shared'],
['vp', '@vue/shared'],
] as const)('%s → %s', (pm, expected) => {
expect(
getPackageSpecifier({
Expand All @@ -94,6 +97,7 @@ describe('install command generation', () => {
['bun', 'bun add lodash'],
['deno', 'deno add npm:lodash'],
['vlt', 'vlt install lodash'],
['vp', 'vp add lodash'],
] as const)('%s → %s', (pm, expected) => {
expect(
getInstallCommand({
Expand All @@ -113,6 +117,7 @@ describe('install command generation', () => {
['bun', 'bun add lodash@4.17.21'],
['deno', 'deno add npm:lodash@4.17.21'],
['vlt', 'vlt install lodash@4.17.21'],
['vp', 'vp add lodash@4.17.21'],
] as const)('%s → %s', (pm, expected) => {
expect(
getInstallCommand({
Expand All @@ -133,6 +138,7 @@ describe('install command generation', () => {
['bun', 'bun add -d eslint'],
['deno', 'deno add -D npm:eslint'],
['vlt', 'vlt install -D eslint'],
['vp', 'vp add -D eslint'],
] as const)('%s → %s', (pm, expected) => {
expect(
getInstallCommand({
Expand All @@ -153,6 +159,7 @@ describe('install command generation', () => {
['bun', 'bun add @trpc/server'],
['deno', 'deno add jsr:@trpc/server'], // Native JSR preferred
['vlt', 'vlt install @trpc/server'],
['vp', 'vp add @trpc/server'],
] as const)('%s → %s', (pm, expected) => {
expect(
getInstallCommand({
Expand All @@ -172,6 +179,7 @@ describe('install command generation', () => {
['bun', 'bun add @trpc/server@10.0.0'],
['deno', 'deno add jsr:@trpc/server@10.0.0'], // Native JSR with version
['vlt', 'vlt install @trpc/server@10.0.0'],
['vp', 'vp add @trpc/server@10.0.0'],
] as const)('%s → %s', (pm, expected) => {
expect(
getInstallCommand({
Expand All @@ -192,6 +200,7 @@ describe('install command generation', () => {
['bun', 'bun add @vue/shared'],
['deno', 'deno add npm:@vue/shared'], // Falls back to npm: compat
['vlt', 'vlt install @vue/shared'],
['vp', 'vp add @vue/shared'],
] as const)('%s → %s', (pm, expected) => {
expect(
getInstallCommand({
Expand Down Expand Up @@ -345,6 +354,7 @@ describe('install command generation', () => {
['bun', ['bunx', 'eslint']],
['deno', ['deno', 'run', 'npm:eslint']],
['vlt', ['vlx', 'eslint']],
['vp', ['vp', 'exec', 'eslint']],
] as const)('%s → %s', (pm, expected) => {
expect(
getExecuteCommandParts({
Expand All @@ -364,6 +374,7 @@ describe('install command generation', () => {
['bun', ['bunx', 'degit']],
['deno', ['deno', 'run', 'npm:degit']],
['vlt', ['vlx', 'degit']],
['vp', ['vp', 'dlx', 'degit']],
] as const)('%s → %s', (pm, expected) => {
expect(
getExecuteCommandParts({
Expand All @@ -383,6 +394,7 @@ describe('install command generation', () => {
['bun', ['bun', 'create', 'vite']],
['deno', ['deno', 'create', 'npm:vite']],
['vlt', ['vlx', 'vite']],
['vp', ['vp', 'create', 'vite']],
] as const)('%s → %s', (pm, expected) => {
expect(
getExecuteCommandParts({
Expand Down
Loading