[Vuetify] Vutify UI 라이브러리 가이드

🖱️ 1. Vuetify란?

Vuetify는 Vue.js 전용 UI 컴포넌트 라이브러리로, 100개 이상의 다양한 UI 컴포넌트를 제공하고, 버튼, 폼, 테이블 등 모든 UI 요소를 포함하고 있으며, Vue 3와 완벽하게 호환하고 있는 라이브러리 입니다. Vuetify를 사용하는 이유로는 다음과 같습니다.

• 프로젝트에 필요한 UI 컴포넌트를 일일이 만들 필요 ❌
• 반응형 디자인이 기본 제공
• 테마 변경과 커스터마이징 가능
• 대규모 애플리케이션에도 일관적인 UI를 제공

👉 Vuetify는 초기 개발 속도를 크게 높여주면서 서비스의 퀄리티를 유지 시켜주는 라이브러리라고 말할 수 있음.

---

💿 2. Vuetify 설치 방법 (Vue 3 기준)

1 ) Vue 프로젝트 생성

먼저 Vue CLI 또는 npm create vue@latest 명령어를 사용해 Vue 3 프로젝트를 생성합니다. TypeScript 사용 여부는 프로젝트 환경에 맞게 세팅해줍니다.

npm create vue@latest

2 ) Vuetify 설치

프로젝트 폴더로가, 다음 명령어로 Vutify를 설치합니다.

npm install vuetify@next sass sass-loader

3 ) Vuetify 세팅

설치가 완료되었다면,src/plugins/vuetify.js 파일을 생성하고 다음 코드를 작성합니다.

import { createVuetify } from "vuetify";
import "vuetify/styles";

export default createVuetify();

4 ) main.js
main.js 파일에서 Vuetify를 Vue 앱을 적용합니다. 

import { createApp } from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";

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

 

이제 Vuetify의 컴포넌트를 프로젝트에 바로 사용할 수 있습니다.

---

💿 3. 기본 컴포넌트 사용 예시

Vuetify를 설치하고, 간단한 버튼 컴포넌트를 만들어줍니다.

<template>
  <v-btn color="primary">Hello Vuetify</v-btn>
</template>

---

💿 4. Vuetify의 장단점

👨‍🔬 장점 

• 디자인 일관성: Material Design을 기반으로 한 컴포넌트 제공
• 다양한 컴포넌트: 버튼, 테이블, 데스크탑 등 다양한 환경에서 대응함
• 테마 지원: 기본 테마뿐 아닌 커스터마이징 가능

👨‍🔬 단점

• 번들 크기: 많은 기능들 때문에 초기 번들 용량이 다소 큼
• 커스터마이징 제한: Meterial Design 기능인 만큼 스타일 변경에 한계가 있음
• 학습 곡선: 다양한 기능들로 인해 처음 배우는 사람들에게 다소 복잡할 수 있음

---

💿 5. 실무 활용 예시

👩‍💼 관리자 페이지

• 데이터 테이블, 폴, 모달 등을 조합해 CRUD 기능 구현
• ex. 회원 관리, 상품 관리, 주문 관리용 페이지, 배송 관리 

👩‍💼 대시보드

• 차트, 카드, 통계, 컴포넌트와 함께 시각적인 UI를 구성
• Vuetify + Chart.js를 조합해 시각적인 차트 프로젝트를 구성함

👩‍💼 모바일 반응형 UI

• 기본 그리드 시스템을 활용한 플랫폼별 화면 크기에 대응 
• Fast MVP 개발 시 유용

---

🦖 추가 팁

Vuetify는 테마를 직접 커스터마이징 할 수 있게 지원하고 있습니다. 예를 들어 다크모드를 적용하려면 다음과 같습니다.

export default createVuetify({
  components,
  directives,
  theme: {
    themes: {
      light: {
        colors: {
          primary: "#1976D2",
          secondary: "#424242",
          customBlue: "#3f51b5",
        },
      },
      dark: {
        colors: {
          primary: "#2196F3",
          secondary: "#FFCDD2",
        },
      },
    },
  },
});

import { createApp } from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";

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

<template>
  <v-btn @click="toggleTheme" :color="isDark ? 'secondary' : 'primary'">
    {{ isDark ? "다크 모드" : "화이트 모드" }}
  </v-btn>
</template>

<script setup>
import { ref } from "vue";
import vuetify from "../plugins/vuetify";

const isDark = ref(vuetify.theme.global.name.value === "dark");

const toggleTheme = () => {
  const Theme = isDark.value ? "light" : "dark";
  vuetify.theme.change(Theme);
  isDark.value = !isDark.value;
};
</script>

<script setup>
import ThemeToggle from "./components/ThemeToggle.vue";
</script>

<template>
  <div color="primary">Hello Vuetify</div>
  <div>
    <ThemeToggle />
  </div>
</template>

<style scoped></style>

---

 

GitHub - Koras02/vutify-posting