https://github.com/glare-labs/vue-mdc

Material Design 3 styled components for Vue3js.
https://github.com/glare-labs/vue-mdc

component-library m3 material material-design material-design-3 material-you md3 mdc vue vue-components vue-library vue3 vuejs

Last synced: about 1 month ago
JSON representation

Material Design 3 styled components for Vue3js.

• Host: GitHub
• URL: https://github.com/glare-labs/vue-mdc
• Owner: glare-labs
• License: mit
• Created: 2023-11-23T04:00:49.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-23T11:58:34.000Z (8 months ago)
• Last Synced: 2024-10-24T18:54:13.236Z (7 months ago)
• Topics: component-library, m3, material, material-design, material-design-3, material-you, md3, mdc, vue, vue-components, vue-library, vue3, vuejs
• Language: SCSS
• Homepage: https://vue-mdc.web.app
• Size: 2.41 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# @glare-labs/vue-mdc

![Vue MDC Logo](https://raw.githubusercontent.com/glare-labs/vue-mdc/refs/heads/main/docs/vue-mdc-cover.png)

![NPM Downloads](https://img.shields.io/npm/d18m/@glare-labs/vue-mdc?label=NPM%20Downloads)

![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/glare-labs/vue-mdc/total?label=Github%20Downloads)

![NPM Version](https://img.shields.io/npm/v/%40glare-labs%2Fvue-mdc?label=NPM%20Version)

![GitHub License](https://img.shields.io/github/license/glare-labs/vue-mdc?label=License)

`@glare-labs/vue-mdc` provides easy-to-use simple Vue components, provides complete type support, and is based on Vue3 and TypeScript.

With the help of the third-party library [`@material/material-color-utilities`](https://github.com/material-foundation/material-color-utilities), you can easily create a color scheme that conforms to the rules, and each component following the design principles of [`Material Design 3`](https://m3.material.io/).

Now the bundle size has been calculated: [bundle-size.md](https://github.com/glare-labs/vue-mdc/blob/main/packages/vue-mdc/bundle-size.md).

## :zap: Highlights

+ Dynamic Theme

+ Material Design 3

+ Vue 3

+ TypeScript Supported

## :eyes: Installation

Currently in **beta** phase.

```bash

npm i @glare-labs/vue-mdc @material/material-color-utilities @glare-labs/material-tokens-generator

```

## :ship: Example

+ [StackBlitz Example](https://stackblitz.com/edit/nuxt-starter-z1ueb2?embed=1&file=app.vue)

## :ledger: Documents

Documentation is available at [Github Wiki](https://github.com/glare-labs/ui/wiki), or visit [Vue MDC Website](https://vue-mdc.web.app)

_Official website is subject to Firebase plan and rate restrictions._