{"id":15011172,"url":"https://github.com/themusecatcher/vue-amazing-ui","last_synced_at":"2025-05-15T14:03:13.573Z","repository":{"id":70064933,"uuid":"604058291","full_name":"themusecatcher/vue-amazing-ui","owner":"themusecatcher","description":"基于 Vue3 + TypeScript + Vite 开发的 UI 组件库！主题可调，全量使用 TypeScript 和 SFC，支持 tree shaking！若觉得好用，欢迎点个 ⭐️⭐️ 支持一下 🫶🫶 ","archived":false,"fork":false,"pushed_at":"2025-04-12T10:49:43.000Z","size":178771,"stargazers_count":320,"open_issues_count":2,"forks_count":46,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-12T11:39:05.529Z","etag":null,"topics":["components","components-library","less","tree-shaking","typescript","vite","vitepress","vue3"],"latest_commit_sha":null,"homepage":"https://themusecatcher.github.io/vue-amazing-ui/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/themusecatcher.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-02-20T08:46:04.000Z","updated_at":"2025-04-12T10:49:46.000Z","dependencies_parsed_at":"2024-05-28T06:10:23.422Z","dependency_job_id":"af7a78ca-0d1c-4078-8ca7-9bcfe8eef33b","html_url":"https://github.com/themusecatcher/vue-amazing-ui","commit_stats":{"total_commits":1783,"total_committers":1,"mean_commits":1783.0,"dds":0.0,"last_synced_commit":"93eef6a3eb8cf564ec45e85491af7987429cfffa"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themusecatcher%2Fvue-amazing-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themusecatcher%2Fvue-amazing-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themusecatcher%2Fvue-amazing-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themusecatcher%2Fvue-amazing-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themusecatcher","download_url":"https://codeload.github.com/themusecatcher/vue-amazing-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248564657,"owners_count":21125408,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","components-library","less","tree-shaking","typescript","vite","vitepress","vue3"],"created_at":"2024-09-24T19:39:26.916Z","updated_at":"2025-05-15T14:03:13.562Z","avatar_url":"https://github.com/themusecatcher.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://themusecatcher.github.io/vue-amazing-ui/\"\u003e\n    \u003cimg width=\"200\" src=\"https://themusecatcher.github.io/vue-amazing-ui/amazing-logo.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eVue Amazing UI\u003c/h1\u003e\n\u003cp align=\"center\"\u003eA Vue 3 Component Library\u003c/p\u003e\n\u003cp align=\"center\"\u003eTheme Customizable, Fully using TypeScript and SFC, Supports tree shaking.\u003c/p\u003e\n\u003cp align=\"center\"\u003eKinda Interesting\u003c/p\u003e\n\u003cp align=\"center\"\u003eEnglish | \u003ca href=\"README.zh-CN.md\"\u003e中文\u003c/a\u003e\u003c/p\u003e\n\n## Documentation\n\n[Vue Amazing UI](https://themusecatcher.github.io/vue-amazing-ui/)\n\n## Features\n\n- The component library is implemented with `Vue@3.5.13`+ `TypeScript@5.8.3` + `Vite@6.3.5` + `Less@4.3.0`.\n- Currently, it includes `67` basic UI components and `17` utility functions, with continuous exploration and updates ongoing...\n- Theme Customizable, all you need is to provide a theme color, then all the stuffs will be done by me.\n- By the way, they are all treeshakable.\n- All the stuff in Vue Amazing UI is written in TypeScript. It can work with your typescript project seamlessly.\n- All components are built in single file component `SFC` and can be used independently.\n- Ready to use out of the box, no fuss.\n\n## Installation\n\n```sh\npnpm add vue-amazing-ui\n# or\nnpm install vue-amazing-ui\n# or\nyarn add vue-amazing-ui\n# or\nbun add vue-amazing-ui\n```\n\n## Use Components\n\n**Global Registration All Components (Not Recommended)**\n\n*No tree-shaking. Bundle will have redundant codes.*\n\n```ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport VueAmazingUI from 'vue-amazing-ui'\nimport 'vue-amazing-ui/css'\n\nconst app = createApp(App)\napp.use(VueAmazingUI)\napp.mount('#app')\n```\n\n**Global Partial Registration**\n\n*In this form, only the imported components will be bundled.*\n\n```ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport { Button, Tag } from 'vue-amazing-ui'\nimport 'vue-amazing-ui/es/button/Button.css'\nimport 'vue-amazing-ui/es/tag/Tag.css'\n\nconst app = createApp(App)\napp.use(Button).use(Tag)\napp.mount('#app')\n```\n\n**Local Registration**\n\n*In this form, only the imported components will be bundled as well.*\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { Button, Tag } from 'vue-amazing-ui'\nimport 'vue-amazing-ui/es/button/Button.css'\nimport 'vue-amazing-ui/es/tag/Tag.css'\n\u003c/script\u003e\n\u003ctemplate\u003e\n  \u003cButton\u003ebutton\u003c/Button\u003e\n  \u003cTag\u003etag\u003c/Tag\u003e\n\u003c/template\u003e\n```\n\n**Both Global Partial Registration and Local Registration require manually importing the global default styles of the component library ([Automatic On-Demand Import](https://themusecatcher.github.io/vue-amazing-ui/guide/ondemand.html#%E8%87%AA%E5%8A%A8%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90) is recommended).**\n\n```ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'vue-amazing-ui/es/style/global.css' // 引入全局默认样式\n\nconst app = createApp(App)\napp.mount('#app')\n```\n\n**Automatic On-Demand Import (Strongly Recommended)**\n\nUse the [`unplugin-vue-components`](https://github.com/unplugin/unplugin-vue-components) plugin to automatically import components on demand. The plugin will automatically parse the components used in the template and import the components and styles.\n\n```sh\npnpm add unplugin-vue-components -D\n# or\nnpm install unplugin-vue-components -D\n# or\nyarn add unplugin-vue-components -D\n# or\nbun add unplugin-vue-components -D\n```\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport Components from 'unplugin-vue-components/vite'\n// vue-amazing-ui on-demand import\nimport { VueAmazingUIResolver } from 'vue-amazing-ui'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    vue(),\n    Components({\n      resolvers: [\n        // auto import components from VueAmazingUI\n        VueAmazingUIResolver({\n          cjs: false // whether use commonjs build, default false\n        })\n      ]\n    })\n  ]\n})\n```\n\nThen, you can directly use all components from `vue-amazing-ui` in your code.\n\n```vue\n\u003ctemplate\u003e\n  \u003cButton\u003ebutton\u003c/Button\u003e\n  \u003cTag\u003etag\u003c/Tag\u003e\n\u003c/template\u003e\n```\n\n## Use Types\n\n*All types can be directly imported and used from `vue-amazing-ui` without any additional installation.*\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\nimport type { ButtonProps } from 'vue-amazing-ui'\nconst shape = ref\u003cButtonProps['shape']\u003e('default')\n\u003c/script\u003e\n\u003ctemplate\u003e\n  \u003cButton :shape=\"shape\"\u003ebutton\u003c/Button\u003e\n\u003c/template\u003e\n```\n\n## Use Functions\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport {\n  dateFormat,\n  formatNumber,\n  rafTimeout,\n  cancelRaf,\n  throttle,\n  debounce,\n  add,\n  downloadFile,\n  toggleDark,\n  useEventListener,\n  useMutationObserver,\n  useScroll,\n  useFps,\n  useMediaQuery,\n  useResizeObserver,\n  useSlotsExist,\n  useInject\n} from 'vue-amazing-ui'\n\u003c/script\u003e\n```\n\n## Project\n\n- Get the project code\n\n```sh\ngit clone https://github.com/themusecatcher/vue-amazing-ui.git\n```\n\n- Install dependencies\n\n```sh\ncd vue-amazing-ui\n\npnpm i\n```\n\n- Run project\n\n```sh\npnpm dev\n```\n\n- Run docs\n\n```sh\ndocs:dev\n```\n\n## Blogs\n\n[My CSDN Blogs](https://blog.csdn.net/Dandrose)\n\n## Sponsorship\n\n`Vue Amazing UI` is an open-source project licensed under the `MIT` license, and it is completely free to use. All work on the component library and documentation is completed by the author alone, and the development and iteration process has been challenging. For the healthy and sustainable development of the component library, your support and sponsorship are greatly appreciated.\n\n#### [Become a Sponsor](https://themusecatcher.github.io/vue-amazing-ui/sponsor/charge.html)\n\n## Sponsors 🫡\n\nAll sponsors will be listed here, thank you very much for your support and sponsorship ❤️\n\n\u003ca href=\"https://github.com/themusecatcher\" target=\"_blank\"\u003e\u003cimg width=\"64\" height=\"64\" src=\"./docs/public/avatar.png\" alt=\"GitHub@themusecatcher\" title=\"GitHub@themusecatcher\"\u003e\u003c/a\u003e \u003cimg width=\"64\" height=\"64\" src=\"./docs/public/avatar_1.jpeg\" alt=\"WeChat@Ant\" title=\"WeChat@Ant\" /\u003e \u003ca href=\"https://github.com/nizhensh-i\" target=\"_blank\"\u003e\u003cimg width=\"64\" height=\"64\" src=\"./docs/public/avatar_2.jpg\" alt=\"GitHub@nizhensh-i\" title=\"GitHub@nizhensh-i\"\u003e\u003c/a\u003e \u003ca href=\"https://github.com/beijin1949\" target=\"_blank\"\u003e\u003cimg width=\"64\" height=\"64\" src=\"./docs/public/avatar_3.png\" alt=\"GitHub@beijin1949\" title=\"GitHub@beijin1949\"\u003e\u003c/a\u003e \u003ca href=\"https://github.com/JinZemin\" target=\"_blank\"\u003e\u003cimg width=\"64\" height=\"64\" src=\"./docs/public/avatar_4.png\" alt=\"GitHub@JinZemin\" title=\"GitHub@JinZemin\"\u003e\u003c/a\u003e\n\n## Components\n\nName | Description | Name | Description\n:-- | :-- | :-- | :--\nAlert | 警告提示 | Avatar | 头像\nBackTop | 回到顶部 | Badge | 徽标\nBreadcrumb | 面包屑 | Button | 按钮\nCalendar | 日历 | Card | 卡片\nCarousel | 轮播图 | Cascader | 级联选择\nCheckbox | 复选框 | Collapse | 折叠面板\nColorPicker | 颜色选择器 | ConfigProvider | 全局化配置\nCountdown | 倒计时 | DatePicker | 日期选择器\nDescriptions | 描述列表 | Dialog | 对话框\nDivider | 分割线 | Drawer | 抽屉\nEllipsis | 文本省略 | Empty | 空状态\nFlex | 弹性布局 | FloatButton | 浮动按钮\nGradientText | 渐变文字 | Grid | 栅格\nHighlight | 高亮文本 | Image | 图片\nInput | 输入框 | InputNumber | 数字输入框\nInputSearch | 搜索框 | List | 列表\nLoadingBar | 加载条 | Message | 全局提示\nModal | 模态框 | Notification | 通知提醒\nNumberAnimation | 数值动画 | Pagination | 分页\nPopconfirm | 弹出确认 | Popover | 气泡卡片\nProgress | 进度条 | QRCode | 二维码\nRadio | 单选框 | Rate | 评分\nResult | 结果 | Scrollbar | 滚动条\nSegmented | 分段控制器 | Select | 选择器\nSkeleton | 骨架屏 | Slider | 滑动输入条\nSpace | 间距 | Spin | 加载中\nStatistic | 统计数值 | Steps | 步骤条\nSwiper | 触摸滑动 | Switch | 开关\nTable | 表格 | Tabs | 标签页\nTag | 标签 | Textarea | 文本域\nTextScroll | 文字滚动 | Timeline | 时间轴\nTooltip | 文字提示 | Upload | 上传\nVideo | 播放器 | Waterfall | 瀑布流\nWatermark | 水印\n\n## Functions\n\nName | Description | Type\n:-- | :-- | :--\ndateFormat | Format date-time string function | (value: number \u0026#124; string \u0026#124; Date = Date.now(), format: string = 'YYYY-MM-DD HH:mm:ss') =\u003e string\nformatNumber | Number formatting function | (value: number \u0026#124; string, precision: number = 2, separator: string = ',', decimal: string = '.', prefix?: string, suffix?: string) =\u003e string\nrafTimeout | Function to implement `setTimeout` or `setInterval` using `requestAnimationFrame` | (fn: Function, delay: number = 0, interval: boolean = false) =\u003e object\ncancelRaf | Function to cancel the `rafTimeout` function | (raf: { id: number }) =\u003e void\nthrottle | Throttle function | (fn: Function, delay: number = 300) =\u003e any\ndebounce | Debounce function | (fn: Function, delay: number = 300) =\u003e any\nadd | Addition function that eliminates precision issues in JavaScript arithmetic | (num1: number, num2: number) =\u003e number\ndownloadFile | Function to download a file with a custom filename; if no filename is provided, it extracts the filename from the URL | (url: string, fileName?: string) =\u003e void\ntoggleDark | Function to toggle dark mode | () =\u003e void\nuseEventListener | Function to add and remove event listeners using Vue lifecycle hooks | (target: HTMLElement \u0026#124; Window \u0026#124; Document, event: string, callback: Function) =\u003e void\nuseMutationObserver | Function to observe changes in DOM elements using `MutationObserver` | (target: Ref \u0026#124; Ref[] \u0026#124; HTMLElement \u0026#124; HTMLElement[], callback: MutationCallback, options = {}) =\u003e object\nuseScroll | Function to monitor the scroll position and state of a target element in real time | (target: Ref \u0026#124; HTMLElement \u0026#124; Window \u0026#124; Document = window, throttleDelay: number = 0, onScroll?: (e: Event) =\u003e void, onStop?: (e: Event) =\u003e void) =\u003e object\nuseFps | Function to monitor the browser's refresh rate (FPS) in real time | () =\u003e object\nuseMediaQuery | Function to determine if the current environment matches a specified media query condition | (mediaQuery: string) =\u003e object\nuseResizeObserver | Function to observe changes in the dimensions of DOM elements using `ResizeObserver` | (target: Ref \u0026#124; Ref[] \u0026#124; HTMLElement \u0026#124; HTMLElement[], callback: ResizeObserverCallback, options = {}) =\u003e object\nuseSlotsExist | Function to watch for the existence of slots with given names, supporting single slots or an array of slots | (slotsName: string \u0026#124; string[] = 'default') =\u003e Reactive \u0026#124; Ref\\\u003cboolean\u003e\nuseInject | A function that uses injection to obtain color palettes and shadow color | (key: string) =\u003e { colorPalettes: Ref\u003cstring[]\u003e; shadowColor: Ref\u003cstring\u003e }\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemusecatcher%2Fvue-amazing-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemusecatcher%2Fvue-amazing-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemusecatcher%2Fvue-amazing-ui/lists"}