el-admin-components

A Vue 3 + Element Plus component library and Vite plugin for admin dashboards. It provides reusable UI components (tables, forms, charts, players, themes, etc.), i18n modules, utilities, and a Vite plugin to assist development. A playground/ is included for local demo and manual testing.

• Package name: el-admin-components
• Module formats: ESM and UMD
• Types: bundled in dist/index.d.ts
• License: MIT

Features

• Rich components: Avatar, Charts (ECharts / vue-echarts), Description, Editor, Form, Icon, Layouts, Menu, Notice, Player (Audio/Video), Slide, Table, Themes, Transition
• Element Plus integration
• i18n support: built-in locales and helper module
• Utilities: color helpers, formatters, directives (copy, debounce, throttle, draggable, etc.)
• Vite plugin: helpers available via import { vite } from 'el-admin-components' export path
• Playground: vite-based demo under packages/el-admin-components/playground

Installation

npm install el-admin-components
# or
pnpm add el-admin-components

Peer dependencies

This library expects the following to be available in the host project (versions indicate tested ranges):

• vue ^3.4
• element-plus ^2.6
• vue-router ^4.3
• vue-i18n ^9.10
• vue-echarts ^6.6 and echarts ^5.5 (for charts)
• howler ^2.2 (for audio)
• video.js ^8 (for video)
• sortablejs ^1.15 (for drag-and-drop)

Usage

Import styles

// main.ts of your app
import 'el-admin-components/style'

Register and use components

You can import components on demand via your bundler, or rely on auto-import tooling if configured.

import { Table, Form, Description } from 'el-admin-components'

UMD users can load dist/el-admin-components.umd.js from a CDN and access components via global variable if your bundler/environment supports it.

Vite plugin (optional)

The library ships a small helper plugin build.

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { default as AdminPlugin } from 'el-admin-components/vite'

export default defineConfig({
  plugins: [vue(), AdminPlugin()]
})

i18n

Locales are provided under el-admin-components/locales/*. You can merge them into your app i18n setup.

import en from 'el-admin-components/locales/en.json'
import zhCN from 'el-admin-components/locales/zh-cn.json'

Development

# run local dev playground
npm run dev

# generate assets (e.g., icon lists, etc.)
npm run generate
npm run generate:dev

# type-check
yarn type-check # or: npm run type-check

# lint
npm run lint:eslint
npm run lint:oxlint

# format
npm run format

Build

# library build (ESM + UMD + d.ts)
npm run build

# build only the library (no plugin)
npm run build-only

# build plugin bundle
npm run plugin

# bundle analysis
npm run analysis

Test

npm run test:unit

Directory structure

A high-level overview of the most relevant paths in this package:

packages/el-admin-components/
  build/
    script.cjs                # asset/code generation utilities
  dist/                       # build output (ESM/UMD/types/css)
  playground/                 # local demo app (Vite)
    src/                      # demo sources and examples
  src/
    components/
      Avatar/                 # avatar list/menu
      Charts/                 # ECharts/vue-echarts wrapper
      Description/            # description list
      Edtior/                 # markdown/rich editor
      Form/                   # dynamic forms and layouts
      Icon/                   # icon components and pickers
      Layouts/                # layout helpers (header, tabs)
      Menu/                   # menus and submenus
      Notice/                 # notifications/messages
      Player/                 # audio/video players
      Slide/                  # progress/slide widgets
      Table/                  # table and columns
      Themes/                 # dark mode, theme settings, breadcrumbs
      Transition/             # collapse transition
    directives/               # v-copy, v-debounce, v-throttle, etc.
    modules/
      i18n.ts                 # i18n helpers
    utils/                    # color/format helpers and index.ts
    vite-plugin.ts            # plugin source
  types/                      # auto-generated type helpers
  README.md                   # this file

License

MIT © Brian [email protected]

For a Simplified Chinese version, see: README_CN.md