# @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).