Material Components for VueJS
Switch branches/tags
Clone or download
Failed to load latest commit information.
.github docs: add issue template Mar 26, 2018
.vscode style: add prettier support Apr 28, 2018
components feat(mdc-dialog): Add raised props for accept and cancel dialog buttons Aug 24, 2018
demo initial implementation of z index on elevation Jul 16, 2018
docs Fixed css loaderOptions example in getting-started Jun 21, 2018
static chore(demo): fix logo path Dec 4, 2017
.babelrc feat: remove need for polyfill on ie11 Dec 29, 2017
.editorconfig style: add prettier support Apr 28, 2018
.eslintignore build(test): exclude test.spec from eslint Nov 1, 2017
.eslintrc.js style: add prettier support Apr 28, 2018
.gitignore build(demo): refactor dev and prod webpack builds Oct 22, 2017
.markdownlint.json feat(select): add non box version as per MDCWeb 0.30.0 Feb 17, 2018
.npmrc ci: fix missing jest dependency Nov 25, 2017
.prettierrc style: add prettier support Apr 28, 2018
.stylelintignore chore(build): refactor build config Oct 22, 2017
.travis.yml ci(node): switch to node 10 Aug 18, 2018
.vcmrc feat(changelog): moving to angular git commit convention Sep 29, 2017 chore(release): 0.18.2 Aug 18, 2018 Create Jun 25, 2017 feat(docs): add style guide Dec 8, 2017
LICENSE fix package.json May 26, 2017 docs(README): uppdate README Apr 29, 2018
jest.config.js chore(package): update dev dependencies Feb 24, 2018
package-lock.json chore(release): 0.18.2 Aug 18, 2018
package.json chore(release): 0.18.2 Aug 18, 2018
rollup.config.js build: fix postcss dist warning Apr 29, 2018
stylelint.config.js style: add prettier support Apr 28, 2018
webpack.config.js chore: add friendly-errors-webpack-plugin for dev build Apr 29, 2018

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

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


Fork the reference codepen template or one of the vue-mdc-adapter codepen collection or the CodeSandbox


  <!-- import reset material icons, fonts and vue-mdc-adapter stylesheets -->
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href=",400,500" type="text/css">

  <!-- import vue and then vue-mdc-adapter -->
  <script src=""></script>
  <script src=""></script>
  <!-- vue mdc markup -->


npm install -g vue-cli
vue init stasson/vue-mdc-adapter-simple my-project
npm install -g vue-cli
vue init stasson/vue-mdc-adapter-webpack my-project
cd my-project
npm install
npm run dev

Check out the Getting Started guide for more.