@vup/ui Component Library

Vue 3 UI component library based on Element Plus, providing common business components and method-based APIs. If you want to replace it with another component library, you can replace the corresponding implementation as needed.

Technical Stack

• Element Plus - Vue 3 component library
• Vue 3 - Progressive JavaScript framework
• TypeScript - Type safety

Quick Start

Installation

pnpm add @vup/ui

Global Registration

Register all components globally in the application entry file:

import { createApp } from 'vue';
import App from './App.vue';
import VUI from '@vup/ui';

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

On-Demand Usage

If you only need to use some components, you can import them on demand:

<script setup lang="ts">
import { VButton } from '@vup/ui';
</script>

<template>
  <VButton type="primary">Primary</VButton>
</template>

Available Components

Basic Components

• VButton - Button component
• VInput - Input component
• VText - Text component
• VIcon - Icon component
• VLink - Link component
• VTag - Tag component
• VBadge - Badge component

Form Components

• VCheckbox - Checkbox
• VCheckboxGroup - Checkbox group
• VRadio - Radio button
• VRadioGroup - Radio group
• VSelect - Select
• VSwitch - Switch
• VDatePicker - Date picker
• VInputNumber - Number input
• VUpload - File upload

Data Display

• VCard - Card
• VEmpty - Empty state
• VImage - Image
• VPagination - Pagination
• VScrollbar - Scrollbar
• VFileList - File list
• VFileModal - File preview modal

Feedback Components

• VModal - Dialog
• VDrawer - Drawer
• VMessage - Message notification
• VMessageBox - Message confirmation box
• VNotification - Notification
• VLoading - Loading
• VTooltip - Tooltip
• VPopover - Popover
• VPopconfirm - Popconfirm

Navigation Components

• VMenu - Menu
• VMenuGroup - Menu group
• VMenuItem - Menu item
• VDropdown - Dropdown menu

Method-based API

In addition to component form, method-based APIs are also provided for convenient calls in JavaScript code:

import { VMessage, VMessageBox, VNotification, VLoading } from '@vup/ui';

// Message notification
VMessage.success('Operation successful');
VMessage.error('Operation failed');
VMessage.warning('Warning message');
VMessage.info('Info message');

// Message confirmation box
VMessageBox.confirm('Are you sure to delete?', 'Prompt', {
  confirmButtonText: 'Confirm',
  cancelButtonText: 'Cancel',
})
  .then(() => {
    // Confirm action
  })
  .catch(() => {
    // Cancel action
  });

// Notification
VNotification({
  title: 'Notification Title',
  message: 'Notification content',
  type: 'success',
});

// Loading
const loading = VLoading.service({
  target: '.container',
  text: 'Loading...',
});
// Close loading
loading.close();

Usage Examples

Basic Button

<template>
  <div class="button-demo">
    <VButton>Default</VButton>
    <VButton type="primary">Primary</VButton>
    <VButton type="success">Success</VButton>
    <VButton type="warning">Warning</VButton>
    <VButton type="danger">Danger</VButton>
  </div>
</template>

Form Components

<template>
  <div class="form-demo">
    <VInput v-model="username" placeholder="Enter username" />
    <VSelect v-model="city" placeholder="Select city">
      <option value="beijing">Beijing</option>
      <option value="shanghai">Shanghai</option>
    </VSelect>
    <VCheckbox v-model="agree">I agree to the terms</VCheckbox>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VInput, VSelect, VCheckbox } from '@vup/ui';

const username = ref('');
const city = ref('');
const agree = ref(false);
</script>

Dialog

<template>
  <div>
    <VButton @click="showModal = true">Open Dialog</VButton>
    <VModal v-model="showModal" title="Title">
      <p>Dialog content</p>
      <template #footer>
        <VButton @click="showModal = false">Cancel</VButton>
        <VButton type="primary" @click="handleConfirm">Confirm</VButton>
      </template>
    </VModal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VButton, VModal } from '@vup/ui';

const showModal = ref(false);

const handleConfirm = () => {
  // Handle confirm logic
  showModal.value = false;
};
</script>

Notes

• Components are globally registered using file names as component names (e.g., VButton, VModal)
• Based on Element Plus, please refer to Element Plus official documentation for specific usage
• If you need to replace with another component library, you can replace the corresponding implementation as needed
• Method-based API instances can call the close() method to close

Related Resources

• Element Plus Official Documentation
• Vue 3 Official Documentation