mylmz10 / vue-material-3

Material Design 3 styled components for Vue 3

Vue Material 3

IMPORTANT: Vue Material 3 is a work in progress and subject to major changes until 1.0 release.

The Vue Material 3 provides Vue 3 components which implement the Material You (Material Design 3) specs and tools for building beautiful apps.

Components

• Autocomplete
• Badge
• Buttons
• Bottom Sheets
• Carousel
• Cards
• Checkbox
• Chips
• Date Picker
• Dialog
• Divider
• FABs
• Icon
• Icon Button
• List
• Menu
• Navigation Bars
• Navigation Drawer
• Navigation Rail
• Progress Indicator
• Radio Button
• Search
• Segmented Button
• Side Sheets
• Slider
• Snackbar
• Switch
• Tabs
• Text Fields
• Time Picker
• Tooltips
• Top App Bar

Quick Start

Install vue-material-3 using npm or yarn:

npm install vue-material-3 --save
yarn add vue-material-3

Then use in your template:

<template>
  <div>
    <md-elevated-button>It works!</md-elevated-button>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { MdElevatedButton } from "vue-material-3";

export default defineComponent({
  components: {
    MdElevatedButton,
  },
});
</script>

License

MIT

vue-material-3's Issues

Failed compile with Vue-material-3

Hello, I have problem. I'm using Vue 3 and i've installed this library.
I want use mdSwitch and used this code:

<template>
<MdSwitch />
</template>

<script>
import {MdSwitch} from "vue-material-3";
export default {
    name: "DemoPage",
    components: {
        MdSwitch
    }
}
</script>

<style scoped>

</style>

But, I have 32 errors(Oh no...):
https://gist.github.com/NikitaSavc/3b66bd5593d44ed29dec7049add4b170