@glare-labs/vue-mdc v0.1.1-pre.1

@glare-labs/vue-mdc

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

With the help of the third-party library @material/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.

For more information on color generation, please go to @material/material-color-utilities.

For more information about MD, please go to Material Design 3.

Vue-MDC is developed for Vite. If you are using Webpack or other scaffolding, Vue-MDC cannot ensure that it will run as expected.

:zap: Highlights

• Material Design 3
• Vue 3
• Sass
• TypeScript Supported

:eyes: Installation

Necessary: Dependencies for using Vue-MDC:

npm i @glare-labs/vue-mdc @glare-labs/vue-reflect-attribute

Build with SASS (Optional)

Optional: In addition to exporting the build, Vue-MDC also exports the src folder of the project. The src/themes folder exports the themes of available components. These files are written in sass. If you want to use these sass files, please install the sass dependency:

npm i sass -D

Build with Sourcecodes (Optional)

Optional: Components are in the src/components folder. These files are written in sass and tsx. If you want to use these tsx files, please install sass, @vitejs/plugin-vue-jsx and typescript dependencies:

npm i sass typescript @vitejs/plugin-vue-jsx -D

:ship: Example

Don't know how to use Vue-MDC? Explore Vue-MDC with simple examples from Github Wiki - Examples.

If you want to showcase something you've created with Vue-MDC, please contact me.

:ledger: Documents

Documentation is available at Github Wiki.

The document is being edited and the content will be presented soon.

:world_map: Roadmap

If you want to follow the latest progress of Vue-MDC, please jump to issue Project Tracker.

:floppy_disk: Bundle size

The bundle size has been calculated: bundle-size.md.