Package Manager
Display commands for multiple package managers with automatic syncing and switching.
Overview
The Package Manager components automatically generate code blocks showing the equivalent command across different package managers (npm, pnpm, bun, and yarn). This makes your documentation more accessible to users regardless of their preferred package manager.
Components
There are three main components for different command types:
- ProsePmInstall - For installing packages
- ProsePmRun - For running scripts
- ProsePmX - For executing packages (npx, pnpm dlx, etc.)
All components support syncing, which allows users to switch between package managers once and have all command blocks update automatically.
ProsePmInstall
Use this component to show package installation commands across all package managers.
Basic Installation
Install a package
Install Multiple Packages
Dev Dependencies
Install packages as dev dependencies using the save-dev prop
Multiple Dev Dependencies
Install All Dependencies
Show the install command without a package name
Without Syncing
Disable syncing for standalone examples:
Custom Sync Key
Use a custom sync key to create separate sync groups
ProsePmRun
Use this component to show script execution commands.
Run Development Server
Run Build
Run Tests
Run Custom Scripts
Run with Arguments
Without Syncing
ProsePmX
Use this component for package execution commands (npx, pnpm dlx, bun x, yarn dlx).
Create New Project
Initialize Nuxt Project
Run Create Next App
Execute CLI Tools
TypeScript Init
Without Syncing
In-Stack Layout
All components support the in-stack prop for use within code groups or when you want a more compact display.
Installation in Stack
Run Script in Stack
Execute Command in Stack
Complete Setup Example
Here's a complete example showing a typical project setup workflow:
Step 1: Create Project
Step 2: Navigate to Directory
cd my-project
Step 3: Install Dependencies
Step 4: Install Additional Packages
Step 5: Install Dev Dependencies
Step 6: Run Development Server
Props Reference
ProsePmInstall Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | - | Package name(s) to install. Omit for install command |
save-dev | boolean | false | Install as dev dependency |
in-stack | boolean | false | Use stack layout |
sync | string | "_pm" | Sync group identifier |
no-sync | boolean | false | Disable syncing |
ProsePmRun Props
| Prop | Type | Default | Description |
|---|---|---|---|
script | string | Required | Script name to run |
in-stack | boolean | false | Use stack layout |
sync | string | "_pm" | Sync group identifier |
no-sync | boolean | false | Disable syncing |
ProsePmX Props
| Prop | Type | Default | Description |
|---|---|---|---|
command | string | Required | Command to execute |
in-stack | boolean | false | Use stack layout |
sync | string | "_pm" | Sync group identifier |
no-sync | boolean | false | Disable syncing |
Package Manager Differences
The components handle package manager-specific syntax automatically:
Install Command
| Package Manager | Install | Install (empty) | Save Dev |
|---|---|---|---|
| npm | npm i | npm install | -D |
| pnpm | pnpm i | pnpm install | -D |
| bun | bun add | bun install | -d |
| yarn | yarn add | yarn install | -D |
Run Command
| Package Manager | Run Script |
|---|---|
| npm | npm run |
| pnpm | pnpm run |
| bun | bun run |
| yarn | yarn run |
Execute Command
| Package Manager | Execute |
|---|---|
| npm | npx |
| pnpm | pnpm dlx |
| bun | bun x |
| yarn | yarn dlx |
Syncing Behavior
By default, all package manager components within a page share the same sync group (_pm). When a user selects a package manager in one component, all other synced components update automatically.
Default Sync Group
These will sync together:
Custom Sync Groups
Create separate sync groups for different contexts:
Disable Syncing
Use no-sync for standalone examples:
Real-World Examples
React Project Setup
Create a new Vite project:
Install additional dependencies:
Install dev tools:
Start the development server:
Vue Project Setup
Create a new Vue project:
Install Vue Router and Pinia:
Install dev dependencies:
Run the dev server:
Nuxt Project Setup
Initialize a new Nuxt project:
Navigate to the project:
cd my-nuxt-app
Install dependencies:
Add UI library:
Start development:
Tips
- Use syncing to provide a consistent experience across your documentation
- Disable syncing for isolated examples or tutorials with different contexts
- Use custom sync groups when you have multiple unrelated command sequences on the same page
- Always show the installation command when introducing new dependencies