home / skills / lizychy0329 / starter-skills / vite-lib-vue-pnpm-starter-skill
This skill bootstraps a minimal Vite Vue 3 library starter with pnpm workspace and TypeScript support, generating all files directly.
npx playbooks add skill lizychy0329/starter-skills --skill vite-lib-vue-pnpm-starter-skillReview the files below or copy the command above to add this skill to your agents.
---
name: vite-lib-vue-pnpm-starter-skill
description: Create a minimal Vite Vue 3 library starter with pnpm workspace, direct file generation. Use when developers need to bootstrap a Vue 3 component library with TypeScript support using pnpm as the package manager.
---
# Vite Lib Vue 3 PNPM Starter Skill
This skill creates a minimal Vite + Vue 3 library project template using pnpm workspace for dependency management. It directly generates all necessary files without using Vite's official initialization commands.
## Core Features
- Directly generate all configuration files without manual intervention
- pnpm workspace for monorepo structure management
- Vue 3 + TypeScript support
- Minimal configuration approach
- pnpm package manager only
## Usage Workflow
### 1. Create Project Directory Structure
```bash
mkdir -p src/components
mkdir -p playground/src
mkdir -p playground/public
```
### 2. Generate Configuration Files
Generate the following essential files:
- Root `package.json` with workspace configuration and build scripts
- `pnpm-workspace.yaml` for monorepo setup
- `vite.config.ts` with library build configuration
- TypeScript configuration files (`tsconfig.json`, `tsconfig.app.json`, `tsconfig.node.json`)
- Library entry files (`index.ts`, `src/index.ts`, `src/components/index.ts`)
- Example component (`src/components/Counter.vue`)
- Playground files (`playground/package.json`, `playground/vite.config.ts`, `playground/index.html`, etc.)
- `.gitignore` file
### 3. Install Dependencies
```bash
pnpm install
```
### 4. Validate Setup
#### Build Validation
```bash
pnpm build
```
**Expected Result:**
- Successful build with no errors
- Generated `dist/` directory
- Files: `index.es.js`, `index.umd.js`, `index.d.ts`
#### Development Validation
```bash
cd playground && pnpm dev
```
**Expected Result:**
- Development server starts successfully
- No compilation errors
- No TypeScript errors
- Accessible development page
## Project Structure
```
project-root/
├── .gitignore
├── index.ts
├── package.json
├── pnpm-workspace.yaml
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
├── vite.config.ts
├── src/
│ ├── index.ts
│ ├── components/
│ │ ├── index.ts
│ │ └── Counter.vue
│ └── style.css
├── playground/
│ ├── .gitignore
│ ├── index.html
│ ├── package.json
│ ├── tsconfig.json
│ ├── tsconfig.app.json
│ ├── tsconfig.node.json
│ ├── vite.config.ts
│ ├── public/
│ └── src/
│ ├── main.ts
│ ├── App.vue
│ ├── style.css
│ └── assets/
└── dist/ (generated after build)
```
## Key Implementation Details
### Library Configuration
- Set `vue` as external dependency in `vite.config.ts`
- Use `vite-plugin-dts` for TypeScript declaration generation
- Configure proper exports in `package.json` for different module systems
### TypeScript Setup
- Use TypeScript Project References for better compilation performance
- Strict TypeScript settings for improved code quality
### Playground Setup
- Reference main library via `workspace:*` for local development
- Separate configuration for isolated testing environment
## When to Use This Skill
- Creating a new Vue 3 component library
- Using Vite as the build tool
- Preferring pnpm for package management
- Needing a playground for local testing
- Requiring TypeScript type declarations
## Important Notes
- **pnpm Only:** Project is configured exclusively for pnpm
- **Minimal Configuration:** Keep settings lean and focused
- **Direct File Generation:** No Vite official commands used
- **Workspace Dependency:** Playground uses `workspace:*` for latest code
- **Type Checking:** `vue-tsc -b` runs before build
- **External Vue:** Vue is not bundled into the library
- **TypeScript References:** For optimal compilation
## Troubleshooting
### Q: Why pnpm instead of npm?
A: Faster installation, stricter dependency management, and better monorepo support.
### Q: Why separate package.json for playground?
A: Isolated environment with its own dependencies, referencing main library via workspace.
### Q: Why externalize Vue in build?
A: Avoids duplicate bundling and version conflicts, follows library best practices.
### Q: Why use TypeScript References?
A: Enables independent compilation of subprojects for faster builds and more accurate type checking.
This skill creates a minimal Vite + Vue 3 library starter using pnpm workspaces and TypeScript. It generates all required files directly, producing a ready-to-build component library and an isolated playground for local testing. The template keeps configuration minimal and enforces pnpm as the package manager.
The skill scaffolds a monorepo layout with a root package, pnpm-workspace.yaml, library source, and a playground app. It writes Vite, TypeScript, and build configs (including vite-plugin-dts), a sample Counter.vue component, and scripts that run vue-tsc and build outputs. After pnpm install, you can run build and start the playground to validate outputs and dev experience.
Why use pnpm instead of npm or yarn?
pnpm offers faster installs, stricter dependency hoisting, and superior monorepo workspace behavior which improves local development and CI reproducibility.
Is Vue bundled into the library output?
No. Vue is externalized in the build to avoid duplicate bundling and to let consumers manage the Vue version.
How do I validate the scaffolded project?
Run pnpm install, pnpm build at the root to produce dist/, and cd playground && pnpm dev to confirm the development server and TypeScript checks succeed.