posva
vue-mdc
JavaScript

Material web components for Vue.js

Last updated Jun 17, 2026
1.2k
Stars
93
Forks
37
Issues
0
Stars/day
Attention Score
34
Language breakdown
JavaScript 78.7%
Vue 19.6%
CSS 1.6%
โ–ธ Files click to expand
README

If you're looking for vue-mdl, check the mdl branch. To learn about what's happening, check #139



last version Circle CI Codecov Coverage Discord


Vue Material Components web

Material Components Web for Vue.js

This is the adaptation of Material Components web for Vue.js. Keeping them fast, easy to use and, SSR ready.

The docs will be the demo, until then you can check the test folder and the Material Components web demo

Installation

$ npm install --save vue-mdc

or

$ yarn add vue-mdc

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueMdc from 'vue-mdc'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-mdc/dist/vue-mdc.css'

Vue.use(VueMdc)

Browser

<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vue-mdc/dist/vue-mdc.css"></link>

<!-- From CDN --> <link rel="stylesheet" href="https://unpkg.com/vue-mdc/dist/vue-mdc.css"></link>

Docs

WIP ๐Ÿ˜

Development

Launch visual tests

npm run dev

Launch Karma with coverage

npm run dev:coverage

Build

Bundle the js and css of to the dist folder:

npm run build

Publishing

The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first

It'll also commit it and create a tag

npm version

Push the bumped package and tags

git push --follow-tags

Ship it ๐Ÿš€

npm publish

License

MIT

ยฉ 2026 GitRepoTrend ยท posva/vue-mdc ยท Updated daily from GitHub