This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
vue-material with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
Material Design for Vue.js
Vue Material is lightweight framework built exactly according to the Material Design specs.
It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.
Build powerful and well-designed web apps that can fit on every screen. You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API.
Import Roboto and Material Icons 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">
Install Vue Material through npm or yarn
npm install --save vue-material 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.css' // OR var Vue = require('vue') var VueMaterial = require('vue-material') require('vue-material/dist/vue-material.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>
Enable Vue Material in your application using
Vue.use(). You can always enable individual components:
Vue.use(VueMaterial) // OR Vue.use(VueMaterial.MdCore) //Required to boot vue material Vue.use(VueMaterial.MdButton) Vue.use(VueMaterial.MdIcon) Vue.use(VueMaterial.MdSidenav) Vue.use(VueMaterial.MdToolbar)
Vue Material do not run under the umbrella of any company or something like that. Is an independent project created by Marcos Moura on spare time that became 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.
If you think that this project helped you or your company in some way, you can consider become a backer/sponsor on Patreon:
The issue list is exclusively for reports, bugs and feature requests. Use the Slack instead.
Please make sure to read the Contributing Guide before making a pull request.
Vue Material supports the latest version of all Browsers. This means:
May work in other browsers but it's untested.
You don't need to include any other library to work with vue-material. The focus of this project is to have a standalone build with no external dependence, but aiming to deliver the best experience without break the compatibility with the Vue.js core.