Tiny Component Library

A minimal Vue 3 component library with automated versioning and publishing using Changesets.

Features

• 🎨 Vue 3 + TypeScript components
• 📦 Vite for fast builds
• 🔄 Changesets for version management
• 🚀 Automated publishing via GitHub Actions
• 📝 Full TypeScript support

Installation

npm install tiny-component-lib
# or
pnpm add tiny-component-lib
# or
yarn add tiny-component-lib

Usage

Import all components

import { createApp } from "vue";
import TinyComponentLib from "tiny-component-lib";
import "tiny-component-lib/style.css";

const app = createApp(App);
app.use(TinyComponentLib);
app.mount("#app");

Import individual components

<script setup lang="ts">
import { Button, Card } from "tiny-component-lib";
import "tiny-component-lib/style.css";
</script>

<template>
  <Button variant="primary" @click="handleClick"> Click me </Button>

  <Card variant="elevated">
    <template #header>Card Title</template>
    <p>Card content goes here</p>
    <template #footer>Card Footer</template>
  </Card>
</template>

Components

Button

<Button variant="primary" size="medium" @click="handleClick">
  Click me
</Button>

Props:

• variant: 'primary' | 'secondary' | 'danger' (default: 'primary')
• size: 'small' | 'medium' | 'large' (default: 'medium')
• disabled: boolean (default: false)

Events:

• click: Emitted when button is clicked

Card

<Card variant="elevated">
  <template #header>Optional Header</template>
  Card content
  <template #footer>Optional Footer</template>
</Card>

Props:

• variant: 'default' | 'bordered' | 'elevated' (default: 'default')

Slots:

• header: Optional header slot
• default: Main content
• footer: Optional footer slot

Development

Setup

pnpm install

Dev Server

Run the demo app with hot reload:

pnpm dev

Build

Build the library:

pnpm build

Publishing Workflow

This library uses Changesets for version management and automated publishing.

Creating a Changeset

When you make changes that should be released:

1. Make your code changes
2. Run pnpm changeset
3. Select the type of change:
   • patch: Bug fixes (0.0.X)
   • minor: New features (0.X.0)
   • major: Breaking changes (X.0.0)
4. Write a summary of your changes
5. Commit the generated changeset file

Automated Release Process

1. Create a PR with your changes and changeset file
2. Merge to main - GitHub Actions will detect the changeset
3. Version Packages PR - Bot automatically creates a PR with:
   • Version bumps in package.json
   • Updated CHANGELOG.md
4. Merge Version PR - Automatically publishes to npm

Prerequisites for Publishing

Before the first publish, set up:

1. NPM Token: Add NPM_TOKEN secret in GitHub repository settings

   • Generate token at https://www.npmjs.com/settings/tokens
   • Use "Automation" token type
   • Add as repository secret

2. Package Name: Update in package.json if needed

   {
     "name": "your-package-name"
   }

3. Repository URL: Update in package.json

   {
     "repository": {
       "type": "git",
       "url": "https://github.com/your-username/your-repo.git"
     }
   }

Project Structure

tiny-component-lib/
├── .changeset/          # Changeset configuration and files
├── .github/
│   └── workflows/       # CI/CD workflows
├── src/
│   ├── components/      # Vue components
│   │   ├── Button.vue
│   │   └── Card.vue
│   ├── demo/           # Demo app
│   ├── index.ts        # Library entry point
│   └── style.css       # Base styles
├── dist/               # Build output
├── package.json
├── tsconfig.json
└── vite.config.ts

License

MIT