vue-material-3

Vue Material 3

Vue Material 3 is a Vue 3 component library inspired by Material Design 3 (Material You). It focuses on practical, composable UI primitives with a clean API and Storybook-first workflow.

Note: The project is still evolving and may include breaking changes before 1.0.0.

Highlights

• Vue 3 component set with Material 3 visual language
• Live Storybook documentation and examples
• Unit test setup with Vitest + Vue Test Utils
• Pre-commit quality gate via Husky (npm test)

Installation

npm install vue-material-3

Quick Start

<template>
  <MdElevatedButton label="Get Started" />
</template>

<script setup>
import { MdElevatedButton } from 'vue-material-3';
</script>

Available Components

• Avatar
• Badge
• Button (ElevatedButton, FilledButton, FilledTonalButton, OutlinedButton, TextButton)
• Card
• Checkbox
• Chip (ChipSet, FilterChip)
• DatePicker (DatePicker, FilledDatePickerField, OutlinedDatePickerField)
• Dialog
• Divider
• Fab (Fab, BrandedFab, FabExtended)
• AutoComplete (FilledAutoComplete, OutlinedAutoComplete)
• Icon
• IconButton
• List (List, ListItem, ListDivider)
• Menu
• NavigationBar
• NavigationDrawer
• NavigationTab
• ProgressIndicator (LinearProgressIndicator, CircularProgressIndicator)
• Radio
• Search
• SegmentedButton (SegmentedButton, SegmentedButtonSet)
• Select (FilledSelect, OutlinedSelect, SelectOption)
• Slider
• Snackbar
• Switch
• Tabs (Tabs, PrimaryTab, SecondaryTab)
• TextField (FilledTextField, OutlinedTextField)
• TimePicker (TimePicker, FilledTimePickerField, OutlinedTimePickerField)
• Tooltip

Planned Components

These components are planned and not published in the current API yet:

• BottomSheet
• Carousel
• NavigationRail
• SideSheet
• TopAppBar

Storybook

• Live docs: https://mylmz10.github.io/vue-material-3
• Local:

npm run storybook

Development

Recommended local runtime:

• Node.js 20.19.0+
• npm 10+

Install dependencies:

npm install

Run tests:

npm test

Build Storybook:

npm run build-storybook

License

MIT