vite-lib-vue-pnpm-starter-skill_skill

Overview

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.

How this skill works

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.

When to use it

• Bootstrapping a new Vue 3 component library with TypeScript
• Setting up a lightweight monorepo using pnpm workspaces
• Needing a local playground that references the library via workspace:*
• Preferring Vue as an external dependency to avoid bundling
• Wanting generated type declarations and minimal config

Best practices

• Keep Vue listed as external in the library build to prevent duplicate bundling
• Use workspace:* in the playground package.json for immediate local changes
• Run vue-tsc -b before building to catch type issues early
• Enable TypeScript project references for faster and reliable compilation
• Keep configuration minimal and document scripts for common tasks

Example use cases

• Create a small, reusable component library to publish to a registry
• Prototype UI components in the playground while developing the library
• Onboard new contributors with a consistent pnpm workspace setup
• Produce ESM/UMD bundles and .d.ts files for consumers
• Switch an existing single-package project into a pnpm monorepo