Skip to content
Material design for Vue.js
Branch: dev
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: apply discord vanity URL (#1927) Sep 9, 2018
build chore: changelog update May 13, 2018
dist build: 1.0.0-beta-10.2 May 15, 2018
docs docs(Icon): fix minor typo (#1973) Dec 18, 2018
src fix(MdSvgLoader): svg loader for invalid / missing mimetype (#1942) Dec 18, 2018
test test(MdCheckbox): fix test script (#1737) May 14, 2018
.codeclimate.yml Update .codeclimate.yml Jan 15, 2018
.editorconfig refactor: misc changes Aug 31, 2017
.eslintignore chore: add commit convention and changelog Jun 23, 2017
.eslintrc style: upgrade dependencies and fix lint issues due to this upgrade Jan 30, 2018
.gitignore comp(MdDialog): create md-file (#13) Sep 20, 2017
.travis.yml docs: improve Codepen examples by transpile all scripts and styles Nov 30, 2017 chore: changelog update May 15, 2018
LICENSE chore: remove todo Jun 23, 2017 chore: apply discord vanity URL (#1927) Sep 9, 2018
package.json refactor(MdDatepicker): Better flow (#1698) Jun 19, 2018
yarn.lock chore: upgrade dependencies Jul 19, 2018

Material Design for Vue.js

Build Status Downloads License Chat

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


Vue Material is proudly sponsored by Rollbar. They provide real-time JavaScript error monitoring, alerting, and analytics for developers. 🚀

You can try Rollbar for free at

Demo and Documentation

Documentation & demos


If you are trying to find the documentation for previous versions, please go to old website.

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'


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'


Alternativelly 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="//,400,500,700,400italic|Material+Icons">




If you have any questions, ideas or you want to discuss with Vue Material community, use Discord to join us.


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.

Credits and Thanks



You can’t perform that action at this time.