메뉴
Implement Material Design 3 in Vue.js using Vuetify 3 with M3-aligned theming, dynamic color, and component library. Covers theme setup, components, dark mode, and design tokens. Use this when building M3-styled Vue.js applications.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | m3-web-vue |
| description | Implement Material Design 3 in Vue.js using Vuetify 3 with M3-aligned theming, dynamic color, and component library. Covers theme setup, components, dark mode, and design tokens. Use this when building M3-styled Vue.js applications. |
| license | Apache-2.0 |
Vuetify 3 is the leading Material Design library for Vue.js with strong M3 support. Dynamic color theming, M3-aligned components, design tokens, and accessibility are built in.
Keywords: Material Design 3, M3, Vue, Vuetify, Vuetify 3, Vue.js, dynamic color, theming
npm install vuetify
// plugins/vuetify.js
import { createVuetify } from 'vuetify';
import 'vuetify/styles';
export default createVuetify({
theme: {
defaultTheme: 'light',
themes: {
light: {
colors: {
primary: '#6750A4',
secondary: '#625B71',
'surface-variant': '#E7E0EC',
error: '#B3261E',
background: '#FEF7FF',
surface: '#FEF7FF',
},
},
dark: {
colors: {
primary: '#D0BCFF',
secondary: '#CCC2DC',
background: '#141218',
surface: '#141218',
},
},
},
},
});
<template>
<v-btn color="primary">Filled</v-btn>
<v-btn variant="outlined">Outlined</v-btn>
<v-btn variant="text">Text</v-btn>
<v-btn variant="tonal">Tonal</v-btn>
<v-btn variant="elevated">Elevated</v-btn>
</template>
<template>
<v-card elevation="1" rounded="lg">
<v-card-title>Card Title</v-card-title>
<v-card-text>Card content following M3 specs</v-card-text>
<v-card-actions>
<v-btn variant="text">Action</v-btn>
</v-card-actions>
</v-card>
</template>
<template>
<v-text-field label="Email" variant="outlined" />
<v-text-field label="Name" variant="filled" />
</template>
<template>
<v-bottom-navigation v-model="value">
<v-btn value="home">
<v-icon>mdi-home</v-icon>
Home
</v-btn>
<v-btn value="search">
<v-icon>mdi-magnify</v-icon>
Search
</v-btn>
</v-bottom-navigation>
<v-navigation-drawer>
<v-list>
<v-list-item title="Home" prepend-icon="mdi-home" />
<v-list-item title="Settings" prepend-icon="mdi-cog" />
</v-list>
</v-navigation-drawer>
</template>
<template>
<v-dialog v-model="dialog" max-width="400">
<v-card>
<v-card-title>Dialog Title</v-card-title>
<v-card-text>Dialog content</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn variant="text" @click="dialog = false">Cancel</v-btn>
<v-btn color="primary" @click="dialog = false">Confirm</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
color, variant, and rounded propsHelp choose an appropriate software/open-source license (e.g., MIT, Apache-2.0, GPL-3.0, AGPL-3.0, MPL-2.0, BSD) based on the user's goals and constraints; explain tradeoffs (permissive vs copyleft, patent grants, SaaS/network copyleft); check for dependency-driven constraints; and generate or update LICENSE files and short license headers. Use when a user asks what license to pick, whether licenses are compatible, or to add a LICENSE file to a repo.
Applies Material Design 3 Expressive dynamic color and theming principles to user interfaces. Use this when working on color palettes, themes, dynamic color systems, accessibility, or when the user asks to apply Material Design 3 color guidelines to a design or application.
Comprehensive guide to Material Design 3 components — from baseline Material You through M3 Expressive. Covers action, containment, communication, navigation, selection, and text input components with specifications, states, and implementation guidelines. Use this when building or styling UI components following Material Design 3 guidelines.
Master guide for Material Design 3 — covering the full specification from Material You foundations through M3 Expressive. Explains when to use each Material Design 3 skill subset (color, motion, typography, shape, layout, components, icons). Use this when starting a Material Design 3 project, when you need to understand which M3 skill to apply, or when the user asks about Material Design 3 in general.
Applies Material Design 3 Expressive motion and animation principles to create natural, intuitive, and engaging user experiences. Use this when implementing animations, transitions, micro-interactions, or when the user asks to apply Material Design 3 motion guidelines.
Applies Material Design 3 Expressive shape and containment principles including rounded corners, morphing shapes, and container design. Use this when working on component shapes, borders, containment, or when the user asks to apply Material Design 3 shape guidelines.