or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

composables.mddata-display-components.mdfeedback-components.mdform-components.mdindex.mdinstallation.mdlayout-components.mdnavigation-components.mdtheming.mdutility-components.md
tile.json

index.mddocs/

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;
}