Setting Up a Monorepo for a Vue 3 Component Library with pnpm and Vite

Unified Development Environment

Standardize the Node version (14+), use pnpm (7.13.5+), and develop with VSCode. Install pnpm globally:

npm install pnpm -g

Package Name Selection and Registration

Before publishing to npm, verify that the desired package name is not taken using: npm view package-name version If the command returns a version, the name is already registered; otherwise you can use it. For occupied names, add a scope such as @yourname/cool-ui or request release from npm.

In this tutorial the chosen name is brain-ui.

Basic Directory Structure

Initialize the root with pnpm init and set it to private. Example package.json:

{
  "name": "brain-ui",
  "private": true,
  "version": "0.0.1",
  "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
  "author": "SNine <[email protected]>",
  "license": "MIT"
}

Create a .npmrc with shamefully-hoist=true to simplify node_modules layout.

Monorepo Workspace Configuration

Create pnpm-workspace.yaml to declare the packages:

packages:
  - 'packages/**'
  - example

Resulting folder tree:

brain-ui
├── .vscode
│   └── settings.json
├── example
├── packages
│   ├── components
│   ├── theme-chalk
│   └── utils
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

Initializing Sub‑packages

Run pnpm init inside each sub‑folder. Example utils/package.json:

{
  "name": "@brain-ui/utils",
  "version": "0.0.1",
  "main": "index.js",
  "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Local Development Preview (example project)

Initialize the example workspace, install Vite and its Vue plugin: pnpm install vite @vitejs/plugin-vue -D Create vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})

Add a dev script in the root package.json: "scripts": { "dev": "pnpm -C example dev" } In example create index.html, main.ts, and app.vue (basic Vue entry). Install TypeScript and generate tsconfig.json with npx tsc --init, then adjust compiler options to match Element‑plus configuration.

Because the project uses TypeScript, add a vue-shim.d.ts declaration:

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

Inter‑Package Linking

Install local packages to the root with the -w flag so they become soft‑linked:

pnpm install @brain-ui/components @brain-ui/theme-chalk @brain-ui/utils -w

This makes the sub‑packages available throughout the monorepo, demonstrating the convenience of a monorepo architecture.

Summary

The article covers environment unification, package name verification, monorepo folder layout, pnpm workspace setup, Vite + Vue 3 development server configuration, TypeScript settings, and local package linking, providing a solid foundation for building a Vue 3 component library from scratch.