TGC - Vue 3 Component Library

A reusable Vue 3 component library built with TypeScript and documented with Storybook.

Features

• ✅ Vue 3 with TypeScript
• ✅ Vite for fast development and optimized builds
• ✅ Storybook for component documentation and development
• ✅ Full TypeScript type definitions
• ✅ Ready to publish to npm or use locally
• ✅ Tree-shakeable ES modules

Installation

All dependencies are already installed. If you need to reinstall:

npm install

Development

Running Storybook

Storybook provides an interactive UI for developing and testing components:

npm run storybook

This will start Storybook at http://localhost:6006

Development Mode (Vite)

Run the Vite dev server:

npm run dev

Building the Library

To build the library for distribution:

npm run build

This will:

• Compile all components
• Generate TypeScript declaration files (.d.ts)
• Create ES and UMD bundles in the dist/ directory
• Output: dist/tgc.es.js, dist/tgc.umd.js, dist/tgc.css, and type definitions

Build Storybook

To build a static version of Storybook for deployment:

npm run build-storybook

Output will be in storybook-static/ directory.

Usage in Other Projects

Method 1: Link Locally (Development)

1. In this library directory, create a global link:

npm link

2. In your target Vue project:

npm link tgc

3. Use the components:

<script setup lang="ts">
import { TButton, TCard } from 'tgc'
// Don't forget to import styles
import 'tgc/dist/style.css'
</script>

<template>
  <TButton variant="primary">Click Me</TButton>
  <TCard title="My Card" elevated>
    Card content here
  </TCard>
</template>

Method 2: Install from File Path

In your target project's package.json:

{
  "dependencies": {
    "tgc": "file:../path/to/tgc"
  }
}

Then run:

npm install

Method 3: Publish to npm

1. Update version in package.json
2. Build the library: npm run build
3. Publish to npm:

npm publish

Or for scoped packages:

npm publish --access public

4. Install in other projects:

npm install tgc

Method 4: Install Global Plugin

You can also install all components globally:

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import TGC from 'tgc'
import 'tgc/dist/style.css'

const app = createApp(App)
app.use(TGC)
app.mount('#app')

Then use components without importing:

<template>
  <TButton>Click Me</TButton>
  <TCard title="My Card">Content</TCard>
</template>

Available Components

TButton

A customizable button component with multiple variants and sizes.

Props:

• variant: 'primary' | 'secondary' | 'outline'
• size: 'small' | 'medium' | 'large'
• disabled: boolean

TCard

A flexible card component with header, body, and footer slots.

Props:

• title: string (optional)
• elevated: boolean (adds shadow)

Slots:

• header: Custom header content
• default: Card body content
• footer: Footer content

Project Structure

tgc/
├── src/
│   ├── lib/                    # Library source code
│   │   ├── components/         # Component files
│   │   │   ├── TButton.vue
│   │   │   ├── TButton.stories.ts
│   │   │   ├── TCard.vue
│   │   │   └── TCard.stories.ts
│   │   └── index.ts           # Main entry point
│   ├── stories/               # Default Storybook examples
│   └── ...
├── dist/                      # Build output (generated)
├── .storybook/               # Storybook configuration
├── vite.config.ts            # Vite build configuration
├── tsconfig.lib.json         # TypeScript config for library
└── package.json

TypeScript Support

The library includes full TypeScript support with exported types:

import type { TButtonProps, TCardProps } from 'tgc'

Commands Reference

| Command | Description | |---------|-------------| | npm run dev | Start Vite dev server | | npm run build | Build the library | | npm run preview | Preview the Vite build | | npm run storybook | Start Storybook dev server | | npm run build-storybook | Build static Storybook | | npm link | Create global symlink for local development | | npm publish | Publish to npm registry |

Adding New Components

1. Create component in src/lib/components/YourComponent.vue
2. Create story file src/lib/components/YourComponent.stories.ts
3. Export component in src/lib/index.ts
4. Run Storybook to test: npm run storybook
5. Build library: npm run build

License

MIT