Vue Material Admin

Vue Material Admin is an open-source admin dashboard template built with Vue 3 and Vuetify 3 that gives developers a production-ready Material Design interface with TypeScript support and a full set of enterprise features.

What is Vue Material Admin?

Vue Material Admin is a free admin template created by Tookit, built on Vue 3.5 and Vuetify 3.11. It takes a standard Vue/Vite project structure and provides ready-made layouts, pages, and components for building admin applications. The template outputs a complete front-end application that runs on any modern browser, with the development server served by Vite at localhost:9527. It includes TypeScript definitions, Pinia stores, Vue Router 4 routing, and an organized source tree with subfolders for API services, composables, plugins, and views.

Key Features

• Vue 3 with Composition API — The template uses the <script setup> syntax for all components, giving concise, type-safe component code.
• Vuetify 3.11 Material Design components — A full set of the latest Material Design UI components, themeable via src/plugins/vuetify/theme.ts and default props in src/plugins/vuetify/defaults.ts.
• TypeScript throughout — Source code, store definitions, and API layers are typed, with a yarn typecheck command for validation.
• Vite 6 build tool — Fast development with hot-module reload, production build via yarn build, and preview via yarn preview.
• Pinia state management — Stores are organized in src/store, with Vue's official state management library.
• Vue I18n internationalization — Multi-language support configured in src/plugins/i18n; a Chinese README version is also provided.
• ApexCharts and FullCalendar — The template includes the ApexCharts library for data visualizations and FullCalendar for advanced calendar views.
• Vue Router 4 — Official routing solution with layout components and route organization in src/router.

Who should use Vue Material Admin?

• Frontend developers building admin dashboards or internal tools: they get a pre-configured project structure with API service layer, composables, and typed stores so they can start writing business features immediately.
• Vue developers new to Vuetify 3 — the theme and defaults files show exactly where to customize colors and component props, acting as a learning reference.
• Product teams needing a fast prototype — the template ships with a login/auth demo page, example views, and a responsive layout that works across the included browser support matrix (last 2 versions of Edge, Firefox, Chrome, Safari).

What can you do with Vue Material Admin?

• Build a custom admin dashboard — replace the demo views and API calls in src/api to connect your own backend and create analytics dashboards using ApexCharts.
• Set up a multilingual admin panel — use the built-in Vue I18n plugin to add locale files and switch languages.
• Create an enterprise front-end foundation — leverage the organized folder structure (components, composables, plugins, layouts, store, types, utils) to maintain a large codebase.
• Learn modern Vue 3 patterns — study the <script setup> components, Pinia stores, and Vuetify theming applied in a real project.

How does Vue Material Admin work?

The template requires Node.js 18+ and Yarn (or npm). After installing dependencies with yarn install, you start the development server with yarn dev, which serves the app at http://localhost:9527 with hot-reload. For production, run yarn build to type-check and output a build to dist, then yarn preview to test the production build locally. Code quality tasks include yarn typecheck for TypeScript checking and yarn lint for linting.

Pricing

Vue Material Admin is free and open source under the MIT license. You can use it for personal and commercial projects without a license fee. The repository includes optional donation links (PayPal and Buy Me a Coffee) to support the author.

FAQ

Is Vue Material Admin free?

Yes, the project is released under the MIT license, so it is free to use for both personal and commercial projects. The repository includes donation links (PayPal and Buy Me a Coffee) to support the author, but they are optional.

What Vue version does Vue Material Admin use?

It is built with Vue 3.5 and uses Vuetify 3.11 as the UI component library. The project is written with the Composition API and the <script setup> syntax.

Does Vue Material Admin include TypeScript support?

Yes, the template is fully typed. It includes TypeScript definitions in the src/types folder, a type-check command (yarn typecheck), and a Vite configuration that supports .ts files out of the box.

What is the default development port?

The Vite development server runs at http://localhost:9527 after you run yarn dev. The port is configured in the Vite configuration file.

Does Vue Material Admin support internationalization?

Yes, it integrates Vue I18n. The i18n setup lives in src/plugins/i18n, and the project even provides a Chinese translation of the README (README.zh-CN.md).