Avue: configuration-driven CRUD and forms on top of Element Plus

A component library whose unit of work is a config object

Avue is a Vue 3 component library built on Element Plus, and its organising idea is that the shape of an admin interface should be a JavaScript object rather than a template. The README describes it as a data-driven component library for form, table and business configuration scenarios, and lists the intended situations: quickly building admin systems, business products heavy on form and table configuration, projects that need a unified interaction standard, and enterprise applications that want to reuse common business components.

The components that carry that idea are named directly: `avue-form`, `avue-crud` and `avue-search`. A form is described by a column array, and each column carries a label, a prop, a span for the grid, and a type. The README's quick-start example is a `v-model` bound to a reactive object plus an `option` ref holding the columns:

<template>
  <avue-form v-model="form" :option="option" />
</template>

GitHub reports JavaScript as the language, an MIT license, 2,301 stars, 492 forks and just 1 open issue. That last number is not a sign of an unusually smooth project. It is a sign of where the project actually lives, which is the next thing worth understanding.

The canonical repository is on Gitee, not GitHub

The `package.json` in the repository declares the repository URL, the bugs URL and the homepage as Gitee addresses under `smallweigit/avue`. The README's badges are also Gitee badges, pointing at `gitee.com/smallweigit/avue` for stars, forks, license and version. The documentation site is `avuejs.com`, the issue tracker the README asks you to use is the Gitee one, and even the individual bug references in the release notes are Gitee issue IDs.

So the GitHub repository you are reading is a mirror, or at minimum the secondary home. That explains the single open issue on GitHub: issues filed against the npm package land on Gitee. If you are evaluating the project, read the changelog on Gitee, because that is where the commit-level detail and the issue discussions are.

The version tells the same story. The README badge shows 3.9.5, and the `package.json` agrees, with the npm package named `@smallwei/avue`, main pointing at `lib/index.js`, module at `es/index.mjs`, types at `types/index.d.ts` and unpkg and jsDelivr both served from `dist/avue.min.js`. The repository tree confirms all of those directories exist, alongside `src/`, `packages/`, `build/`, `styles/`, `scripts/` and a `rollup.config.mjs`.

Installing Vue, Element Plus and Avue together

The peer dependencies are stated in the README as three floors: `vue >= 3.2.0`, `element-plus >= 2.2.0` and `@element-plus/icons-vue >= 2.0.0`. Those are peer dependencies, so they have to be installed alongside Avue rather than resolved for you.

npm install vue element-plus @element-plus/icons-vue @smallwei/avue

Registration is one plugin install with an options object. The README's quick start registers Element Plus first, then Avue with size, menu type and locale, and imports both stylesheets:

app.use(ElementPlus);
app.use(Avue, {
  size: "default",
  menuType: "text",
  locale: "zh-cn",
});

The global options table is where the library's scope shows. The documented keys are `size`, `calcHeight`, `menuType`, `formOption`, `crudOption`, `appendToBody`, `locale`, `i18n`, `axios`, `canvas`, `qiniu` and `ali`. Reading that list tells you what problems the author expects to solve for you: component sizing, a height correction value for layout maths, how the action area renders, default form and CRUD configs, where popups mount, localisation, a custom axios instance for your backend, plus watermarking and two cloud upload providers baked in as defaults.

The component inventory, and what 3.9.4 removed

The README groups the inventory into four buckets. Forms and tables are `avue-form`, `avue-crud`, `avue-search`. Input components are `avue-input`, `avue-select`, `avue-input-tree` and `avue-input-table`. Business components are `avue-login`, `avue-tabs`, `avue-tree`, `avue-chat`, `avue-flow` and `avue-qrcode`. Data display is `avue-card`, `avue-comment`, `avue-count-up` and `avue-article`. Plugins cover export, print, screenshot, clipboard, watermark, logging, image preview and popup forms.

That list has a problem, and the 3.9.4 release notes are where you find it. That release removed `avue-card`, with the recommendation to use a data display component or Element Plus's own `el-card` instead, and removed the older `avue-verify` component in favour of the new `avue-captcha`. Yet the current README still lists `avue-card` under data display. So the README's inventory and the release notes disagree about whether `avue-card` exists.

Both facts are useful. The release notes are the authority on what shipped in which version, and the README has not been updated to match. If you are migrating, read the removal notes for the version you are moving to, and treat the README's component list as a superset that may name things you no longer get.

Recent releases add a captcha, a filter builder and a file manager

The 3.9.x line shows the library absorbing whole application features rather than staying a component layer. Version 3.9.4 added `avue-captcha` with slide-to-fit, text selection, arithmetic, rotation, icon selection, ordered selection, drag matching, alphanumeric and trajectory sliding verification modes, supporting refresh, reset and manual validation. The same release added `avue-filter-builder`, which emits data convertible directly into backend query parameters through logical relations and condition rules, and `avue-file-manager`, which handles folders, upload, search, rename, move, delete and preview for images, audio, video, PDF and text.

Version 3.9.3 went the same way with `avue-input-otp` for one-time passwords, usable standalone or through a form type, `avue-qrcode` with canvas or SVG rendering and export via `toDataURL`, and `avue-iframe` with loading, timeout, error and empty states plus `reload`, `focus` and `postMessage` support.

Version 3.9.5 is narrower and reads like a bug-fix release: a date range component showing invalid dates when configured with `defaultTime: ['00:00:00', '23:59:59']` against both string and Date values, a conflict between column resizing and drag sorting in CRUD, lost multi-select state across pages in card mode where the fix keys on a stable `rowKey` when `reserveSelection` is true, and row-level dictionary lookups leaking between rows in the same column.

For an evaluation, that mix is the signal. The library is moving toward being a framework with a component library attached, which is what the `package.json` description calls itself: A Magic Configurable Web Framework.

Running the examples without a dev server

The local development section has one detail that tells you how the project is organised. There are two commands, and they do different jobs:

pnpm install
pnpm dev

pnpm examples:dev

The examples command runs `node scripts/serve-examples.js`, and the README explains that the examples service does not depend on an extra development server: it serves static assets directly from `examples`, `dist` and `lib`. Once started you browse them at `http://127.0.0.1:5175/examples/`. The reason there are two processes is stated too: if you want to see the effect of editing component source, run `pnpm dev` in another terminal so the `dist` browser bundle that the examples reference keeps updating.

The examples tree supports that story, with `examples/element-plus/` and `examples/data/` called out in the README as the two worth reading, plus `examples/cdn/`, `examples/images/`, `examples/tools/` and a top level `index.html`. The cdn folder matters because `package.json` ships a browser build at `dist/avue.min.js` for unpkg and jsDelivr, so there is a script-tag path for teams that are not using a bundler at all.

One more fact for anyone porting an existing project. The GitHub repository description describes Avue 2.0 as a second encapsulation of Element UI with a focus on table and form scenarios, which is the Vue 2 era description. The README describes Vue 3 and Element Plus, and the peer dependencies confirm Vue 3. The repository description is stale, not the code.

Editorial conclusion

Avue is at its best on the boring, repetitive screens that dominate an internal admin product, where a column array describing a table is much shorter than the template it replaces. The costs are equally clear: a config layer is a second abstraction to learn, upgrades follow Gitee rather than npm conventions, and the component list is wide enough that some of it is dead weight in your bundle. Start by building one CRUD screen from the README example and comparing it against what your team writes by hand, because that comparison is the only real test of whether the abstraction pays. If the library is already in your dependency tree from a Vue 2 project, read the removal notes in 3.9.4 before migrating.

Frequently asked questions

Official sources

1. License: MIT
2. nmxiaowei/avue on GitHub
3. Project website
4. README
5. Releases