Material Design for Vue.js
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 https://rollbar.com
If you are trying to find the documentation for previous versions, please go to old website.
Install Vue Material through npm or yarn
npm install vue-material@beta --save
yarn add vue-material@beta* 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)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 from Google CDN:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">If you have any questions, ideas or you want to discuss with Vue Material community. Use the Discord
Or you can use Slack Channel. Follow this invitation link for Slack.
Please make sure to read the Contributing Guide before making a pull request.
Vue Material supports all modern browsers.
May work in other browsers but it's untested.
- elviskang for donating the npm package name!
- Bruno Castro for the awesome Vue Material Logo.
MIT