Vue Amazing UI

A Vue 3 Component Library

Uses TypeScript, All components are single-file components (SFC), Supports tree shaking.

Kinda Interesting

English | 中文

Documentation

Vue Amazing UI

Features

• The component library is implemented with [email protected]+ [email protected] + [email protected] + [email protected].
• Currently, it includes 65 basic UI components and 16 utility functions, with continuous exploration and updates ongoing...
• What's more, they are all treeshakable.
• All the stuff in Vue Amazing UI is written in TypeScript. It can work with your typescript project seamlessly.
• All components are built in single file component SFC style and can be used independently.
• Ready to use out of the box, no fuss.

Installation

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.

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.

import { createApp } from 'vue'
import App from './App.vue'
import { Button, Tag } from 'vue-amazing-ui'
import 'vue-amazing-ui/es/button/Button.css'
import 'vue-amazing-ui/es/tag/Tag.css'

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.

<script setup lang="ts">
import { Button, Tag } from 'vue-amazing-ui'
import 'vue-amazing-ui/es/button/Button.css'
import 'vue-amazing-ui/es/tag/Tag.css'
</script>
<template>
  <Button>button</Button>
  <Tag>tag</Tag>
</template>

Both Global Partial Registration and Local Registration require manually importing the global default styles of the component library (Automatic On-Demand Import is recommended).

import { createApp } from 'vue'
import App from './App.vue'
import 'vue-amazing-ui/es/style/global.css' // 引入全局默认样式

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

Automatic On-Demand Import (Strongly Recommended)

Use the 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.

pnpm add unplugin-vue-components -D
# or
npm install unplugin-vue-components -D
# or
yarn add unplugin-vue-components -D
# or
bun add unplugin-vue-components -D

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
// vue-amazing-ui on-demand import
import { VueAmazingUIResolver } from 'vue-amazing-ui'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        // auto import components from VueAmazingUI
        VueAmazingUIResolver({
          cjs: false // whether use commonjs build, default false
        })
      ]
    })
  ]
})

Then, you can directly use all components from vue-amazing-ui in your code.

<template>
  <Button>button</Button>
  <Tag>tag</Tag>
</template>

Use Types

All types can be directly imported and used from vue-amazing-ui without any additional installation.

<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from 'vue-amazing-ui'
const shape = ref<ButtonProps['shape']>('default')
</script>
<template>
  <Button :shape="shape">button</Button>
</template>

Use Functions

<script setup lang="ts">
import {
  dateFormat,
  formatNumber,
  rafTimeout,
  cancelRaf,
  throttle,
  debounce,
  add,
  downloadFile,
  toggleDark,
  useEventListener,
  useMutationObserver,
  useScroll,
  useFps,
  useMediaQuery,
  useResizeObserver,
  useSlotsExist
} from 'vue-amazing-ui'
</script>

Project

• Get the project code

git clone https://github.com/themusecatcher/vue-amazing-ui.git

• Install dependencies

cd vue-amazing-ui

pnpm i

• Run project

pnpm dev

• Run docs

docs:dev

Blogs

My CSDN Blogs

Sponsorship

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.

Become a Sponsor

Sponsors 🫡

All sponsors will be listed here, thank you very much for your support and sponsorship ❤️❤️

Components

Name	Description	Name	Description
Alert	警告提示	Avatar	头像
BackTop	回到顶部	Badge	徽标
Breadcrumb	面包屑	Button	按钮
Calendar	日历	Card	卡片
Carousel	轮播图	Cascader	级联选择
Checkbox	复选框	Collapse	折叠面板
ColorPicker	颜色选择器	Countdown	倒计时
DatePicker	日期选择器	Descriptions	描述列表
Dialog	对话框	Divider	分割线
Drawer	抽屉	Ellipsis	文本省略
Empty	空状态	Flex	弹性布局
FloatButton	浮动按钮	GradientText	渐变文字
Grid	栅格	Image	图片
Input	输入框	InputNumber	数字输入框
InputSearch	搜索框	List	列表
LoadingBar	加载条	Message	全局提示
Modal	模态框	Notification	通知提醒
NumberAnimation	数值动画	Pagination	分页
Popconfirm	弹出确认	Popover	气泡卡片
Progress	进度条	QRCode	二维码
Radio	单选框	Rate	评分
Result	结果	Scrollbar	滚动条
Segmented	分段控制器	Select	选择器
Skeleton	骨架屏	Slider	滑动输入条
Space	间距	Spin	加载中
Statistic	统计数值	Steps	步骤条
Swiper	触摸滑动插件	Switch	开关
Table	表格	Tabs	标签页
Tag	标签	Textarea	文本域
TextScroll	文字滚动	Timeline	时间轴
Tooltip	文字提示	Upload	上传
Video	播放器	Waterfall	瀑布流
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
rafTimeout	Function to implement setTimeout or setInterval using requestAnimationFrame	(fn: Function, delay: number = 0, interval: boolean = false) => object
cancelRaf	Function to cancel the rafTimeout function	(raf: { id: number }) => void
throttle	Throttle function	(fn: Function, delay: number = 300) => any
debounce	Debounce function	(fn: Function, delay: number = 300) => any
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; if no filename is provided, it extracts the filename from the URL	(url: string, fileName?: string) => void
toggleDark	Function to toggle dark mode	() => 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
useScroll	Function to monitor the scroll position and state of a target element in real time	(target: Ref | HTMLElement | Window | Document = window, throttleDelay: number = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => object
useFps	Function to monitor the browser's refresh rate (FPS) in real time	() => object
useMediaQuery	Function to determine if the current environment matches a specified media query condition	(mediaQuery: string) => object
useResizeObserver	Function to observe changes in the dimensions of DOM elements using ResizeObserver	(target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: ResizeObserverCallback, options = {}) => object
useSlotsExist	Function to watch for the existence of slots with given names, supporting single slots or an array of slots	(slotsName: string | string[] = 'default') => Reactive | Ref<boolean>