CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-element-plus

A Component Library for Vue 3

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

Element Plus

Element Plus is a comprehensive Vue.js 3 component library that provides 80+ high-quality UI components with a consistent design language. Built with TypeScript and the Vue 3 Composition API, it offers developers a complete toolkit for building modern web applications with extensive theming, internationalization, and accessibility features.

Package Information

  • Package Name: element-plus
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install element-plus

Core Imports

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);

For individual component imports:

import { ElButton, ElForm, ElInput } from 'element-plus';

Basic Usage

import { createApp } from 'vue';
import { ElButton, ElMessage } from 'element-plus';

const app = createApp({
  template: `
    <el-button type="primary" @click="showMessage">
      Click Me
    </el-button>
  `,
  methods: {
    showMessage() {
      ElMessage.success('Hello Element Plus!');
    }
  }
});

app.component('ElButton', ElButton);

Architecture

Element Plus is organized into several key categories:

  • Components: 80+ Vue 3 components covering all UI needs (forms, navigation, data display, feedback)
  • Composables: Vue 3 composition API hooks for common functionality (focus, locale, theming)
  • Directives: Vue directives for enhanced behavior (click-outside, infinite scroll, focus trap)
  • Services: Imperative APIs for notifications, messages, and dialogs
  • Theming: CSS custom properties system with dark mode support
  • Internationalization: Built-in support for 67 languages

Installation and Configuration

Element Plus can be installed globally or used with individual component imports for optimal bundle size.

declare const install: (app: App) => void;
declare const version: string;

interface App {
  use(plugin: any): App;
  component(name: string, component: any): App;
}

Installation and Configuration

Capabilities

Form Components

Complete form solution with validation, input controls, and user interaction components. Essential for data collection and user input handling.

// Core form components
declare const ElForm: Component;
declare const ElFormItem: Component;
declare const ElInput: Component;
declare const ElInputNumber: Component;
declare const ElInputTag: Component;
declare const ElSelect: Component;
declare const ElSelectV2: Component;
declare const ElCheckbox: Component;
declare const ElRadio: Component;
declare const ElSwitch: Component;
declare const ElSlider: Component;
declare const ElDatePicker: Component;
declare const ElTimePicker: Component;
declare const ElTimeSelect: Component;
declare const ElCascader: Component;
declare const ElColorPicker: Component;
declare const ElRate: Component;
declare const ElUpload: Component;
declare const ElMention: Component;

Form Components

Layout Components

Flexible layout system for organizing content with containers, grids, and spacing utilities. Foundation for responsive design.

declare const ElContainer: Component;
declare const ElRow: Component;
declare const ElCol: Component;
declare const ElSpace: Component;

Layout Components

Navigation Components

Navigation and menu components for building intuitive user interfaces with breadcrumbs, tabs, menus, and step indicators.

declare const ElMenu: Component;
declare const ElTabs: Component;
declare const ElBreadcrumb: Component;
declare const ElSteps: Component;
declare const ElDropdown: Component;
declare const ElAnchor: Component;
declare const ElSegmented: Component;
declare const ElTour: Component;

Navigation Components

Data Display Components

Components for presenting and organizing data including tables, lists, cards, and statistical displays with advanced features like virtualization.

declare const ElTable: Component;
declare const ElTableV2: Component;
declare const ElTree: Component;
declare const ElTreeV2: Component;
declare const ElTreeSelect: Component;
declare const ElPagination: Component;
declare const ElCard: Component;
declare const ElTag: Component;
declare const ElCheckTag: Component;
declare const ElImage: Component;
declare const ElImageViewer: Component;
declare const ElAvatar: Component;
declare const ElCarousel: Component;
declare const ElDescriptions: Component;
declare const ElEmpty: Component;
declare const ElResult: Component;
declare const ElSkeleton: Component;
declare const ElStatistic: Component;
declare const ElWatermark: Component;

Data Display Components

Feedback Components

User feedback and overlay components including dialogs, notifications, tooltips, and loading states for enhanced user experience.

declare const ElDialog: Component;
declare const ElDrawer: Component;
declare const ElTooltip: Component;
declare const ElAlert: Component;

// Services
declare const ElMessage: MessageService;
declare const ElNotification: NotificationService;
declare const ElMessageBox: MessageBoxService;

Feedback Components

Utility Components

Utility components and directives for enhanced functionality including icons, scrollbars, infinite scroll, and focus management.

declare const ElIcon: Component;
declare const ElScrollbar: Component;
declare const ElBacktop: Component;
declare const ElAffix: Component;
declare const ElVirtualList: Component;
declare const ElText: Component;
declare const ElLink: Component;
declare const ElSplitter: Component;

// Directives
declare const ClickOutside: Directive;
declare const InfiniteScroll: Directive;
declare const TrapFocus: Directive;
declare const Mousewheel: Directive;
declare const RepeatClick: Directive;

Utility Components

Composables and Hooks

Vue 3 Composition API hooks for shared functionality including theming, internationalization, focus management, and accessibility.

declare function useLocale(): LocaleContext;
declare function useNamespace(block: string): NamespaceReturn;
declare function useSize(): SizeContext;
declare function useFocus(): FocusReturn;
declare function useId(): IdReturn;
declare function useZIndex(): ZIndexReturn;
declare function useModal(): ModalReturn;
declare function usePopper(): PopperReturn;
declare function useDraggable(): DraggableReturn;
declare function useTimeout(): TimeoutReturn;
declare function useDelayedToggle(): DelayedToggleReturn;
declare function useEscapeKeydown(): EscapeKeydownReturn;
declare function useThrottleRender(): ThrottleRenderReturn;
declare function useAttrs(): AttrsReturn;
declare function useProp(): PropReturn;
declare function useAriaProps(): AriaPropsReturn;
declare function useComposition(): CompositionReturn;
declare function useFloating(): FloatingReturn;
declare function useCursor(): CursorReturn;
declare function useOrderedChildren(): OrderedChildrenReturn;
declare function useFocusController(): FocusControllerReturn;
declare function useEmptyValues(): EmptyValuesReturn;

Composables and Hooks

Theming and Customization

Comprehensive theming system with CSS custom properties, SCSS variables, and dark mode support for complete design control.

declare const ElConfigProvider: Component;

interface ConfigProviderProps {
  locale?: Language;
  size?: ComponentSize;
  zIndex?: number;
  namespace?: string;
}

Theming and Customization

Global Types

type ComponentSize = '' | 'large' | 'default' | 'small';

interface Component {
  name?: string;
  props?: Record<string, any>;
  emits?: string[] | Record<string, any>;
  setup?: Function;
}

interface Language {
  name: string;
  el: Record<string, any>;
}

interface Directive {
  mounted?: Function;
  updated?: Function;
  unmounted?: Function;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/element-plus@2.11.x
Publish Source
CLI
Badge
tessl/npm-element-plus badge