Vue 3 Component Library

A modern component library built with Vue 3 and Tailwind CSS.

Installation

npm install vue3-component-library

Components

Button

A versatile button component with multiple variants and features.

Props

| Prop | Type | Default | Description | | --------- | ------- | --------- | --------------------------------------------------------------------------------------------------- | | variant | String | 'primary' | Button style variant. Options: 'primary', 'secondary', 'dark', 'light', 'info', 'danger', 'warning' | | disabled | Boolean | false | Whether the button is disabled | | fullWidth | Boolean | false | Whether the button should take full width of its container |

Events

| Event | Description | | ----- | ---------------------------------- | | click | Emitted when the button is clicked |

Slots

| Slot | Description | | ------- | ---------------------------------------------- | | default | Button content | | icon | Icon content (appears before the main content) |

Usage

<template>
    <!-- Basic usage -->
    <CustomButton>Click me</CustomButton>

    <!-- With variant -->
    <CustomButton variant="danger">Delete</CustomButton>

    <!-- With icon -->
    <CustomButton variant="primary">
        <template #icon>🔔</template>
        Notifications
    </CustomButton>

    <!-- Full width -->
    <CustomButton fullWidth>Full Width Button</CustomButton>

    <!-- Disabled -->
    <CustomButton disabled>Disabled Button</CustomButton>
</template>

<script>
import { CustomButton } from "vue3-component-library";

export default {
    components: {
        CustomButton,
    },
};
</script>

Development

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Build library
npm run build

License

MIT