20. Vuetify란?

🧩 Vuetify란?

Vuetify는 Vue.js를 위한 머티리얼 디자인 UI 프레임워크입니다.
"머티리얼 디자인 UI 프레임워크"는
구글의 머티리얼 디자인 가이드를 따르는 UI 컴포넌트들을 미리 만들어놓은 도구 모음이에요!

 

 

Vuetify는 구글의 Material Design 가이드를 기반으로 만든 Vue.js UI 컴포넌트 라이브러리예요.

• Vue 2 또는 Vue 3에서 사용 가능
• 버튼, 카드, 다이얼로그, 네비게이션 등 다양한 컴포넌트 제공
• 반응형 레이아웃, 테마 지원, 아이콘 내장

🧱 어떤 걸 제공하나요?

• v-btn: 버튼
• v-card: 카드
• v-dialog: 팝업
• v-text-field: 입력창
• v-app, v-main, v-container: 레이아웃 구성
• Dark mode, Grid system, Snackbar, Stepper, Bottom nav 등

📦 설치 방법 (Vue 3 기준)

npm install vuetify@next

 

그리고 main.js 또는 main.ts에 아래처럼 등록:

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

const vuetify = createVuetify({
  components,
  directives,
});

createApp(App).use(vuetify).mount('#app');

🎨 예제: Vuetify 로그인 폼

<template>
  <v-container>
    <v-text-field v-model="email" label="이메일" />
    <v-text-field v-model="password" label="비밀번호" type="password" />
    <v-btn @click="login" color="primary">로그인</v-btn>
  </v-container>
</template>

<script setup>
import { ref } from 'vue';
const email = ref('');
const password = ref('');
const login = () => {
  alert(`로그인: ${email.value}`);
};
</script>

✅ 언제 쓰면 좋아?

• 빠르게 스타일이 예쁜 웹앱을 만들고 싶을 때
• 구글 Material 디자인 스타일이 마음에 들 때
• Vue 기반 프로젝트에서 빠르게 UI를 구축하고 싶을 때