A batteries-included starter for building a Vue 3 + TypeScript component library with a VitePress docs site.

• Monorepo via pnpm workspaces
• Vue 3 + TypeScript
• VitePress docs (apps/docs) with live demos
• Theming via CSS variables (design tokens)
• Library packaging with Rollup + @vitejs/plugin-vue
• Type definitions generated by vue-tsc
• Docs alias to source for instant iteration (no need to prebuild)

pnpm i
pnpm dev:docs     # run docs at http://localhost:5173
pnpm build        # build @jackie733/prism and copy themes.css

pnpm add @jackie733/prism

The library ships ESM and CJS builds. Component CSS is auto-included by bundlers when importing the library; you only need to import the theme tokens once. If your setup does not auto-import CSS, you can also import @jackie733/prism/style.css manually.

1. Import theme tokens (required once):

// e.g. main.ts or a global stylesheet entry
import '@jackie733/prism/themes.css';

2. Import components where needed:

import { Button } from '@jackie733/prism';

3. Use in templates:

<script setup lang="ts">
import '@jackie733/prism/themes.css';
import { Button } from '@jackie733/prism';
</script>

<template>
  <Button intent="primary">Primary</Button>
</template>

• Add tokens CSS globally in nuxt.config.ts:

export default defineNuxtConfig({
  css: ['@jackie733/prism/themes.css'],
});

• Import components where used:

import { Button } from '@jackie733/prism';

• Dark mode: set data-theme="dark" on html or a container.

<html data-theme="dark">
  <!-- app -->
</html>

• @jackie733/prism — UI components (e.g., Button) + CSS token export (themes.css).

• Install: pnpm i
• Run docs: pnpm dev:docs
• Build components: pnpm build
• Build types: pnpm build:types

Node 22+ is recommended for local development/build.