Material Components for Vue
vue-mdc-adapter is an integration of
Material Components
for Vue.js which follows the best practices
recommended by Google:
Using Foundations and Adapters
This project aims to find the right balance between ease of use and customization while sticking to the Vue Spirit (approachable, versatile, and performant)
Quick Links
Project Status
This project is under active development.
The focus is on known issues, validation, and keeping up with MDC updates.
Do not hesitate to open an issue on GitHub,
contact us on Gitter,
or follow us on Twitter @vuemdc
Each MDCWeb component is mapped to a single vue plugin
- button
- card
- checkbox
- chips
- dialog
- drawer
- fab
- grid-list
- icon-toggle
- layout-grid
- linear-progress
- list
- menu
- radio
- select
- slider
- snackbar
- switch
- tabs
- textfield
- toolbar
- top-app-bar
- typography
Extra plugins
- layout-app: provides a flexible layout to simplify toolbar vs drawer positioning
- icon: provides a material icon wrapper with support for font-awesome, svg, etc.
Quick Start
Playground
Fork the reference codepen template or one of the vue-mdc-adapter codepen collection or the CodeSandbox
CDN
<!-- import reset material icons, fonts and vue-mdc-adapter stylesheets --> <!-- import vue and then vue-mdc-adapter --> <!-- vue mdc markup -->Vue CLI
Simple
npm install -g vue-clivue init stasson/vue-mdc-adapter-simple my-projectWebpack
npm install -g vue-clivue init stasson/vue-mdc-adapter-webpack my-projectcd my-projectnpm installnpm run devCheck out the Getting Started guide for more.