UNPKG

@sandlada/vue-mdc

Version:

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

github.com/sandlada/vue-mdc

sandlada/vue-mdc

68 lines (40 loc) • 3.03 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
# @sandlada/vue-mdc ![Vue MDC Logo](https://raw.githubusercontent.com/sandlada/vue-mdc/refs/heads/main/docs/vue-mdc-cover.png) ![Vue MDC Project Preview Picture](https://raw.githubusercontent.com/sandlada/vue-mdc/refs/heads/main/docs/project-view.png) ![NPM Downloads](https://img.shields.io/npm/d18m/@sandlada/vue-mdc?label=NPM%20Downloads) ![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/sandlada/vue-mdc/total?label=Github%20Downloads) ![NPM Version](https://img.shields.io/npm/v/%40sandlada%2Fvue-mdc?label=NPM%20Version) ![GitHub License](https://img.shields.io/github/license/sandlada/vue-mdc?label=License) `@sandlada/vue-mdc` provides easy-to-use Material Design 3 style Vue components. It provides complete type support, and is based on Vue3, Sass 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/). _Vue-MDC is developed for Vue and 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 & CSS - TypeScript ## :eyes: Installation **Necessary**: Dependencies for using Vue-MDC: ```bash npm i @sandlada/vue-mdc ``` ### 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: ```bash 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: ```bash 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](https://github.com/sandlada/vue-mdc/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](https://github.com/sandlada/vue-mdc/wiki). This is just temporary, the final documentation will be available at [vue-mdc.sandlada.com](https://vue-mdc.sandlada.com). We will bring the site online as soon as possible. _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](https://github.com/sandlada/vue-mdc/issues/6). ## :floppy_disk: Bundle size The bundle size has been calculated: [bundle-size.md](https://github.com/sandlada/vue-mdc/blob/main/bundle-size.md).