A Vue 3 Component Library
Theme Customizable, Light and Dark Themes, Written in TypeScript and SFC, Tree Shaking
Kinda Interesting
English | 中文
## Documentation [Vue Amazing UI](https://themusecatcher.github.io/vue-amazing-ui/) ## Features - Currently, it includes `73` basic UI components and `16` utility functions, with continuous exploration and updates ongoing... - Theme Customizable, all you need is to provide a theme color, then all the stuffs will be done by me. - Supports light and dark themes; switch them manually, or let them follow the system theme automatically. - By the way, they are all tree-shakable. - All the stuff in Vue Amazing UI is written in TypeScript. It can work with your typescript project seamlessly. - All components are single file components (`SFC`), so the source code can be used directly. - SSR-ready. - Ready to use out of the box, no fuss. ## Installation ```sh pnpm add vue-amazing-ui # or npm install vue-amazing-ui # or yarn add vue-amazing-ui # or bun add vue-amazing-ui ``` ## Use Components **Global Registration All Components (Not Recommended)** _No tree-shaking. Bundle will have redundant codes._ ```ts import { createApp } from 'vue' import App from './App.vue' import VueAmazingUI from 'vue-amazing-ui' import 'vue-amazing-ui/css' const app = createApp(App) app.use(VueAmazingUI) app.mount('#app') ``` **Global Partial Registration** _In this form, only the imported components will be bundled._ ```ts import { createApp } from 'vue' import App from './App.vue' import { Button, Tag } from 'vue-amazing-ui' // One style entry per component (recommended form): global default styles + the component's own styles + its dependency components' styles import 'vue-amazing-ui/es/button/style' import 'vue-amazing-ui/es/tag/style' const app = createApp(App) app.use(Button).use(Tag) app.mount('#app') ``` **Local Registration** _In this form, only the imported components will be bundled as well._ ```vue
## Components
| Name | Description | Name | Description | Name | Description |
| :-------------- | :--------------- | :-------------- | :--------------- | :-------------- | :--------------- |
| Alert | Alert | AutoComplete | Auto Complete | Avatar | Avatar |
| BackTop | Back to Top | Badge | Badge | Breadcrumb | Breadcrumb |
| Button | Button | Calendar | Calendar | Card | Card |
| Carousel | Carousel | Cascader | Cascader | Checkbox | Checkbox |
| Collapse | Collapse | ColorPicker | Color Picker | Comment | Comment |
| ConfigProvider | Global Config | Countdown | Countdown | DatePicker | Date Picker |
| Descriptions | Descriptions | Dialog | Dialog | Divider | Divider |
| Drawer | Drawer | Dropdown | Dropdown | Ellipsis | Text Ellipsis |
| Empty | Empty State | Flex | Flex Layout | FloatButton | Float Button |
| GradientText | Gradient Text | Grid | Grid | Highlight | Highlight Text |
| Image | Image | Input | Input | InputNumber | Number Input |
| InputSearch | Search Input | Layout | Layout | List | List |
| LoadingBar | Loading Bar | Menu | Menu | Message | Global Message |
| Modal | Modal | Notification | Notification | NumberAnimation | Number Animation |
| Pagination | Pagination | Popconfirm | Popconfirm | Popover | Popover |
| Progress | Progress | QRCode | QR Code | Radio | Radio |
| Rate | Rating | Result | Result | Scrollbar | Scrollbar |
| Segmented | Segmented | Select | Select | Skeleton | Skeleton |
| Slider | Slider | Space | Spacing | Spin | Loading |
| Statistic | Statistic | Steps | Steps | Swiper | Swiper |
| Switch | Switch | Table | Table | Tabs | Tabs |
| Tag | Tag | Textarea | Textarea | TextScroll | Text Scroll |
| Timeline | Timeline | TimePicker | Time Picker | Tooltip | Tooltip |
| Upload | Upload | Video | Video Player | Waterfall | Waterfall |
| Watermark | Watermark | | | | |
## Functions
| Name | Description | Type |
| :-- | :-- | :-- |
| dateFormat | Format date-time string function | (value: number | string | Date = Date.now(), format: string = 'YYYY-MM-DD HH:mm:ss') => string |
| formatNumber | Number formatting function | (value: number | string, precision: number = 2, separator: string = ',', decimal: string = '.', prefix?: string, suffix?: string) => string |
| throttle | Throttle function | (fn: Function, delay: number = 300) => Function |
| debounce | Debounce function | (fn: Function, delay: number = 300) => Function |
| add | Addition function that eliminates precision issues in JavaScript arithmetic | (num1: number, num2: number) => number |
| downloadFile | Function to download a file with a custom filename, with built-in dual download strategies for same-origin `anchor` and cross-origin `iframe`; if no filename is provided, it extracts the filename from the URL | (url: string, fileName?: string, options?: { target?: '_self' | '_blank'; strategy?: 'auto' | 'anchor' | 'iframe' }) => Promise<void> |
| useEventListener | Function to add and remove event listeners using Vue lifecycle hooks | (target: HTMLElement | Window | Document, event: string, callback: Function) => void |
| useMutationObserver | Function to observe changes in DOM elements using `MutationObserver` | (target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: MutationCallback, options: object = {}) => { start: \() => void, stop: \() => void } |
| useScroll | Function to monitor the scroll position, direction and edges of a target in real time | (target?: MaybeRefOrGetter\