Refactoring Fantastic‑admin: Making a Vue‑Based Admin Framework UI‑Agnostic

In the introduction, the author reflects on a previous article about building Fantastic‑admin, a Vue‑based admin framework, and notes the surprising popularity of that post, prompting a three‑year review of the framework’s evolution and the goal of making it more generic.

The main pain points stem from the framework’s heavy reliance on the Element Plus UI library, leading to questions about supporting other UI libraries, potential conflicts with internal component libraries, and migration challenges for legacy projects.

Three solution proposals are explored:

Plan 1: Create separate versions of the framework for each UI library, but this introduces visual inconsistency and maintenance overhead.

Plan 2: Decouple the framework from any third‑party UI library, keeping only a few essential components (Menu, Breadcrumb, Popover, Dropdown) and replacing the rest with independent plugins.

Plan 3: Build custom replacements for the essential components when suitable plugins cannot be found, leveraging Headless UI for unstyled components and custom CSS for a unified look.

The implementation phase proceeds from easy to hard tasks:

1. Breadcrumb

The breadcrumb component is quickly recreated, initially mirroring Element Plus usage before planning a data‑driven approach.

2. Popover & Dropdown

Custom styles are derived from Floating Vue and Nuxt UI, resulting in a satisfactory appearance.

3. Drawer

A Headless UI <Dialog> component is repurposed for the drawer, with the <transition> component handling coordinated animations for backdrop fade‑in and content slide‑in.

4. Form Components

Native form controls are styled, but because <select> cannot style its dropdown, a custom select is built using Floating Vue.

5. Menu

After three weeks of development—initial attempts, source code study of Element Plus, Naive UI, and Ant Design Vue—the author creates a data‑driven menu component that resolves previous bugs such as overflow handling.

Validation is performed by swapping the UI library to Ant Design Vue, Arco Design Vue, Naive UI, and TDesign, each replacement completing within an hour, confirming the framework’s UI‑agnostic nature.

The review revisits the original pain points, confirming that developers can now replace Element Plus with any preferred UI library, avoid conflicts, and migrate legacy projects more easily, while also achieving visual consistency, low onboarding cost, and reduced maintenance.

In conclusion, the author reflects on the effort invested since June, the successful release of Fantastic‑admin V4.0, and hopes the community will adopt the now more flexible framework.