material-components-web-vue

Material design components for Vue.js.

Usage no npm install needed!

<script type="module">
  import materialComponentsWebVue from 'https://cdn.skypack.dev/material-components-web-vue';
</script>

README

Material components web vue

Material design components for Vue.js.

npm npm (prod) dependency version NPM Snyk Vulnerabilities for npm package

<template>
    <div>
        <mdc-radio name="gender" value="1" text="Woman" checked />
        <mdc-radio name="gender" value="2" text="Man" />
        <mdc-radio name="gender" value="3" text="Other" />

        <mdc-button outlined>Cancel</mdc-button>
        <mdc-button elevated icon="check" icon-direction="right">Save</mdc-button>
    </div>
</template>
<script>
    import { MdcButton, MdcRadio } from "material-components-web-vue";

    export default {
        components: {
            MdcButton,
            MdcRadio
        }
    };
</script>
<style lang="scss">
    @import "material-components-web-vue/lib/css/button";
    @import "material-components-web-vue/lib/css/radio";
</style>

Summary

About

Use Vue.js compatible material design web components in your web app, using Vue.js components and directive to let you get ready faster.

Installation

Install the dependency

npm install --save-dev material-components-web-vue

Usage

You can find the components in the documentation page. For each components, you will find instructions to copy into your .vue component, including the html, javascript, and scss code.

Feature requests

If you need something to be changed, fixed, or added, just open a new issue. Thank you for the time spent.