Skip to content
Get packs

Guide · Open source

How to use d2-admin: clone, build and customize a Vue admin panel

Updated · written with AI from the project's own documentation and checked against our catalogue data

d2-admin is a free, MIT-licensed front-end starter kit for building back-office management systems in Vue. This guide shows you how to get the code, what you need installed first, which features it bundles, and where it falls short. By the end you will know whether it fits your admin panel project and how to start from its working base.

d2-admind2-projects/d2-admin · ★ 12.6k · MIT

Quick start

  1. 1Install prerequisites. Install Node.js and Git on your machine.
  2. 2Clone the repository. Run git clone https://github.com/d2-projects/d2-admin.git in your chosen folder.
  3. 3Open the project. Change into the new d2-admin folder.
  4. 4Follow the build steps. Use the setup steps in the official documentation at https://d2.pub/doc/d2-admin/ to build the project.
  5. 5Review the sample pages. Explore the included login, menus, tabs and sample code to learn the structure.
  6. 6Customize for your data. Connect the layout to your own backend and replace the simulation data.

What is d2-admin and who is it for?

D2Admin is a front-end starter kit for admin panels, the kind used to manage data and users. It bundles a Vue-based layout with many prebuilt pages, components and sample code, so developers can begin from a working base instead of an empty project.

It suits developers building internal admin or management dashboards, teams that want a ready-made layout with login, menus and tabs, and developers who already work with Vue. It is not a no-code tool: setup and customization require coding.

  • Good fit: internal admin panels, management dashboards, Vue developers who want sample code to learn from.
  • Poor fit: non-developers wanting a no-code dashboard, teams on a non-Vue stack, projects needing a long-term maintained backend.

What do you need before you install d2-admin?

The source lists two prerequisites: Node.js and Git. Install both before you clone the repository. The README does not list specific version numbers, so check the project's own documentation at https://d2.pub for requirements.

  • Node.js
  • Git
  • Basic familiarity with Vue and the command line

How do you get d2-admin: clone the repository

The install method is clone-and-build. The README gives one clone command. Run it in the folder where you want the project to live, then open the new folder. Follow the build steps in the official documentation at https://d2.pub/doc/d2-admin/ for the rest of the setup.

git clone https://github.com/d2-projects/d2-admin.git

Which features does d2-admin include?

The feature list covers the layout and the common parts of an admin panel. Features marked with a version number were added in that release, so check the version you clone if you rely on one.

  • Login and logout, custom login redirect, and separate routing and menu settings
  • Foldable sidebar, multi-tab mode with drag-and-drop sorting, and global menu search
  • Five themes, multi-language support and a full-screen mode
  • Import Excel (xlsx + csv) and export Excel (xlsx + csv) or text
  • Markdown editor, rich text editor, and chart library
  • Global state management, logging and error catching

How does d2-admin keep the first load small?

The README says the JavaScript loaded locally for the first screen is under 60kb. The project also includes a build file volume checking tool and split chunks. These help keep the homepage light, although the actual size depends on your own changes after you customize the code.

What should you know before using d2-admin in production?

The backends listed in the README are contributed by the open source community. The README states that the latest version of D2Admin is not guaranteed to be tracked by them, so check compatibility before you rely on one. Community projects carry the same caveat.

Compare d2-admin with other Vue admin options such as Vue Element Admin, Vben Admin and Ant Design Pro before you commit. Pick the one whose layout, stack and maintenance fit your team.

  • Backends and community projects may not match the latest d2-admin version.
  • Plan your own backend and authentication work rather than assuming one is included.

What people use it for

  • An internal admin panel to manage users and records for a small company.
  • A management dashboard with login, a sidebar menu and multiple open tabs.
  • A Vue project that imports and exports Excel or CSV files for staff.
  • A learning resource: studying sample pages and components to understand a Vue admin layout.

Frequently asked questions

Is d2-admin free to use?

Yes. The README describes it as fully open source and free, and the licence is MIT. Check the LICENSE file in the repository for the exact terms.

What do I need to install d2-admin?

The README lists Node.js and Git as prerequisites. Clone the repository with git clone, then follow the build steps in the official documentation at d2.pub.

Can I use d2-admin without coding?

No. The README says it requires coding to set up and customize, so it is not a no-code dashboard tool.

Does d2-admin support Excel and CSV?

Yes. The features list includes importing Excel (xlsx and csv) and exporting data to Excel (xlsx and csv) or text.

What are the alternatives to d2-admin?

The source names Vue Element Admin, Vben Admin and Ant Design Pro as comparable projects. Compare their layouts, stacks and maintenance before choosing.

Does d2-admin come with a backend?

The README does not include a bundled backend. It lists community-contributed backends, such as django-vue-admin-pro and boot-admin, but says the latest D2Admin version is not guaranteed to be supported by them.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

d2-admin suits developers who already know Vue and want a free, MIT-licensed admin layout with many sample pages to start from. Pick something else if you need a no-code tool, a non-Vue front end, or a backend that the maintainers guarantee tracks the latest version.

Install options & downloads