Vue MDC A fork of Vue for material/web. Dark mode, Material You dynamic colors, Vue3.
Get Started
Documents
  • tune Customizable Completely built with SASS and deeply customizable.
  • tune TypeScript Developed entirely in Typescript, with full type support.
  • tune MD 3 & Vue 3 Material Design 3 styled component for Vue3.
Build with Sass Completely built with SASS and deeply customizable.
button.module.css _filled-button.scss _elevated-button.scss >_filled-tonal-butto _outlined-button.scss _text-button.scss checkbox.module.css _checkbox.scss fab-module.css _fab.scss ripple.module.css _ripple.scss 
<vmdc-button
    class="override-button"
    appearance="filled"
>My Filled Button</vmdc-button>

.override-button {
    --md-filled-button-container-color: blue;
    --md-filled-button-container-height: 56px;
}

@include ripple.theme((
    hover-color: var(--my-hover-color, red),
    pressed-color: var(--my-pressed-color, blue),
    hover-opacity: var(--my-hover-opacity, 0.08),
    pressed-opacity: var(--my-pressed-opacity, 0.12),
));
Typescript Developed entirely in Typescript, with full type support.
INavigableControllerHost TButtonAppearance TFabSize TTypographyVariant EButtonAppearance EFabSize ETypographyVariant SAttachableController 
<template>
    <div>
        <vmdc-button
            :appearance="EButtonAppearance.Filled"
        >My Filled Button</vmdc-button>

        <vmdc-fab
            :variant="EFabVariant.Primary"
            label="My Primary Fab"
        >
        </vmdc-fab>
    </div>
</template>
<script setup lang="ts">
import { EButtonAppearance } from '@glare-labs/vue-mdc/button'
import { EFabVariant } from '@glare-labs/vue-mdc/fab'

</script>
Theme Provider With the help of the third-party library @material/material-color-utilities, you can easily create a color scheme that conforms to the rules. 
<template>
    <Provider :dark="true"></Provider>
</template>
<script setup lang="ts">
import { Provider } from '@glare-labs/vue-mdc/provider'

</script>
Theme Provider With the help of the third-party library @material/material-color-utilities, you can easily create a color scheme that conforms to the rules. 
<template>
    <Provider :dark="false"></Provider>
</template>
<script setup lang="ts">
import { Provider } from '@glare-labs/vue-mdc/provider'

</script>