Geeker-Admin

Geeker-Admin is an open-source Vue 3 admin dashboard boilerplate built on Vue 3.4, TypeScript, Vite 5, Pinia, and Element-Plus that gives developers a pre-configured admin panel with a reusable ProTable component, dynamic routing, and button-level permission control.

What is Geeker-Admin?

Geeker-Admin is a Vue 3.4 + TypeScript admin framework that uses Vite 5 for development and build, Pinia for state management, and Element-Plus for UI components. It takes a standard Vue project structure and outputs a fully functioning admin panel with authentication, routing, table pages, and internationalization. The project is maintained by HalseySpicy and is available on GitHub and Gitee with over 8,000 stars.

Key Features

• ProTable component — A table component that renders the entire table from a Columns configuration array, reducing repetitive code for CRUD pages.
• Dynamic routing and permissions — VueRouter with route interception, lazy loading, and button-level permission control based on user roles.
• Pinia integration — Uses Pinia instead of Vuex, with a built-in persistence plugin to store state across sessions.
• Axios wrapper — A TypeScript-based Axios layer with request interception, automatic cancellation, and common request methods like get/post/put/delete.
• Theme and layout switching — Support for Element size switching, multiple theme layouts, dark mode, and i18n internationalization.
• KeepAlive caching — Page caching via KeepAlive, including multi-level nested route caching.
• Custom directives — Includes permission, copy, watermark, drag, throttle, debounce, and long-press directives.
• Code quality tools — Prettier for formatting, ESLint and Stylelint for linting, and husky plus lint-staged with commitlint, czg, and cz-git for enforced commit message conventions.

Who is it for?

• Frontend developers building admin dashboards or management systems who want a pre-built starter with routing, permissions, and table components.
• Teams that need a consistent admin interface with dark mode, i18n, and theme switching for multi-language or multi-brand deployments.
• Developers who want to learn best practices for Vue 3 + TypeScript + Vite projects, as the codebase includes complete ESLint/Prettier/Stylelint setup and git hooks.

What can you do with Geeker-Admin?

• Admin panel builders: Quickly create CRUD pages using the ProTable Columns config instead of writing templates and logic for each table.
• Enterprise dashboards: Use the included data visualization and data screen pages to present metrics and real-time data.
• Multi-language apps: Switch interface languages with built-in i18n support and persist user preferences via Pinia.

How does Geeker-Admin work?

Clone the repository from GitHub or Gitee, run pnpm install, then pnpm dev to start the development server. Separate build commands (pnpm build:dev, pnpm build:test, pnpm build:pro) target different environments, and pnpm lint:eslint, pnpm lint:prettier, and pnpm lint:stylelint run each linter independently.

Pricing

The Vue 3 version of Geeker-Admin is open-source. A React version is available for purchase; contact the author via WeChat for details.

Alternatives

Other Vue-based admin templates include vue-element-admin and vue-vben-admin.

FAQ

Is Geeker-Admin free?

Yes, the Vue 3 version is open-source under the LICENSE file in the repository.

What UI library does Geeker-Admin use?

Geeker-Admin uses Element-Plus, the Vue 3 version of the Element UI component library.

Does Geeker-Admin support TypeScript?

Yes, the project is written in TypeScript and uses single-file components with the script setup syntax.

Can I customize the theme?

Yes, Geeker-Admin supports Element component size switching, multiple theme layouts, dark mode, and i18n internationalization.

How do I run the project?

Clone the repository, run pnpm install, then pnpm dev to start the development server.