vue-material
Vue Material is a lightweight Vue.js component library that implements Google's Material Design specification, offering themeable, on-demand-importable UI components like buttons, tabs, dialogs, and form controls.
Embed badge
[](https://opensources.dev/resource/vue-material)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
4/5- Actively maintainedNo commits in over a year
- No known vulnerabilitiesNo OSV advisories
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
npm install vue-materialOur analysis
A Vue.js UI component library that follows Google's Material Design guidelines, providing a set of styled, themeable components with a simple plugin-based API.
When to use vue-material
Good for Vue 2 projects that want a Material Design look without the heavier footprint of larger frameworks, especially when you value individual component imports and dynamic theming.
When not to
Avoid for new Vue 3 projects or apps needing a deep, actively-maintained component catalog and grid system — Vuetify or Quasar are stronger, better-maintained choices. Not suitable if you need a non-Material design language.
Strengths
- Faithful, clean implementation of Material Design specs
- Lightweight with on-demand component imports
- Dynamic theming support
- Simple, familiar Vue plugin (Vue.use) API
- MIT licensed and widely adopted historically
Trade-offs
- No official Vue 3 support — tied to Vue 2
- Project maintenance has stalled / slowed significantly
- Smaller component set than Vuetify or Quasar
- Some long-standing open issues and bugs
- Documentation site depends on an external sponsor's hosting
Maturity
An established, popular library (nearly 10k stars) built largely by a single maintainer in spare time. However, development has effectively stalled and it lacks Vue 3 compatibility, making it a risky choice for greenfield projects despite its historical popularity.
Vue Material is Simple, lightweight and built exactly according to the Google Material Design specs
Build well-designed apps that can fit on every screen with support to all modern Web Browsers with dynamic themes, components on demand and all with an ease-to-use API
Demo and Documentation
Documentation & demos
Examples
Installation and Usage
Install Vue Material through npm or yarn
npm install vue-material --save
yarn add vue-material
* Others package managers like JSPM and Bower are not supported yet.
Import or require Vue and Vue Material in your code:
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
Vue.use(VueMaterial)
Or use individual components:
import Vue from 'vue'
import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs)
Alternatively you can download and reference the script and the stylesheet in your HTML:
<link rel="stylesheet" href="path/to/vue-material.css">
<script src="path/to/vue-material.js"></script>
Optionally import Roboto font & Material Icons from Google CDN:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
Changelog
Changelog
Questions
If you have any questions, ideas or you want to discuss with Vue Material community, use Discord to join us.
Contributing
Please make sure to read the Contributing Guide before making a pull request.
Browser Support
Vue Material supports all modern browsers.
May work in other browsers but it's untested.
Become a part of the Vue Material community
This project exists thanks to all the people who contribute
Sponsors & Backers
Thank you to all our backers! 🙏 [Become a backer]
Credits and Thanks
Vue Material does not run under the umbrella of any company or anything like that. It is an independent project created by Marcos Moura in his spare time, which has become one of the most used UI Libraries for Vue.js. The development is active and we are working hard to release great things for you.
elviskang for donating the npm package name!
Bruno Castro for the awesome Vue Material Logo.
Supported by Creative Tim
License
MIT