Vue Material Admin

English | 简体中文

Introduction

Vue Material Admin is a modern, production-ready admin template built with Vue 3 and Vuetify 3. It features a clean Material Design interface, TypeScript support, and a comprehensive set of components for building enterprise applications.

Key Features

• ⚡️ Vue 3 with Composition API & <script setup>
• 🎨 Vuetify 3.11 - Latest Material Design components
• 📦 TypeScript - Type-safe development
• 🔥 Vite 6 - Lightning fast HMR
• 🗂 Pinia - Intuitive state management
• 🌍 Vue I18n - Internationalization support
• 📊 ApexCharts - Beautiful data visualizations
• 📅 FullCalendar - Advanced calendar component
• 🎯 Vue Router 4 - Official routing solution

Discord Channel

Join our Discord

Demo

• Vuetify 2 version
• Vuetify 3 version

Preview

Documentation

• 🚀 Quick Start Guide - Get started in minutes!d
• 📖 Official Documentation
• 📝 Changelog

Project Structure

├── src/
│   ├── api/              # API service layer
│   ├── components/       # Reusable Vue components
│   ├── composables/      # Vue composables (DRY utilities)
│   ├── layouts/          # Layout components
│   ├── plugins/          # Plugin configurations
│   │   ├── vuetify/      # Vuetify setup & theme
│   │   ├── i18n/         # Internationalization
│   │   └── msw/          # Mock Service Worker
│   ├── router/           # Vue Router configuration
│   ├── store/            # Pinia state management
│   ├── types/            # TypeScript type definitions
│   ├── utils/            # Utility functions
│   ├── views/            # Page components
│   ├── scss/             # Global styles
│   ├── App.vue           # Root component
│   └── main.ts           # Application entry point
├── public/               # Static assets
├── dist/                 # Production build output
└── vite.config.ts        # Vite configuration

Getting Started

Prerequisites

• Node.js 18+ and Yarn (or npm)

Installation

# Install dependencies
yarn install

Development

# Start development server with hot-reload
yarn dev

The application will be available at http://localhost:9527

Production Build

# Type-check and build for production
yarn build
Preview production build locally
yarn preview

Code Quality

# Run TypeScript type checking
yarn typecheck
Lint and fix files
yarn lint

Configuration

Vite Configuration

See Vite Configuration Reference

Vuetify Customization

Theme and component defaults can be customized in:

• src/plugins/vuetify/theme.ts - Color schemes and design tokens
• src/plugins/vuetify/defaults.ts - Component default props

Tech Stack

• Framework: Vue 3 - Progressive JavaScript framework
• UI Library: Vuetify 3 - Material Design component framework
• Build Tool: Vite - Next generation frontend tooling
• State Management: Pinia - Intuitive store for Vue
• Routing: Vue Router 4 - Official router for Vue.js
• Language: TypeScript - JavaScript with syntax for types
• Icons: Material Design Icons
• Charts: ApexCharts - Modern charting library
• Calendar: FullCalendar - Full-sized calendar component
• Styling: SASS - CSS preprocessor

Browser Support

Modern browsers and Internet Explorer 11+ (with polyfills)

|
Edge |
Firefox |
Chrome |
Safari | | --------- | --------- | --------- | --------- | | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

Star History

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you find this project useful, you can support the author:

• PayPal
• Buy Me a Coffee

License

MIT

Copyright (c) 2025 Tookit