쏘니의 개발블로그

Vuetify는 Material Design 가이드를 따르는 Vue.js UI 라이브러리로, 다양한 사전 제작된 컴포넌트와 유틸리티를 제공하여 반응형이고 미적으로 우수한 인터페이스를 빠르게 개발할 수 있도록 도와줍니다. 아래는 Vuetify를 효과적으로 사용하는 데 필요한 주요 개념과 문서에 대한 가이드입니다.

Vuetify 시작하기

• 설치

• 공식 설치 가이드: Vuetify 설치

vue add vuetify

npm install vuetify

설치 후 main.js 파일에서 Vuetify를 설정합니다:

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

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

스타일링 및 레이아웃

Vuetify는 Material Design의 레이아웃 시스템을 따릅니다. v-container, v-row, v-col을 사용하여 반응형 레이아웃을 쉽게 구성할 수 있습니다.

• v-container: 레이아웃의 기본 컨테이너로, 내부에 v-row와 v-col을 포함합니다.

• v-row: 수평 행을 생성하며, 여러 v-col을 포함할 수 있습니다.

• v-col: 열을 생성하며, 그리드 시스템에서 비율에 따라 폭을 차지합니다.

<v-container>
  <v-row>
    <v-col cols="12" md="8">Main content</v-col>
    <v-col cols="12" md="4">Sidebar</v-col>
  </v-row>
</v-container>

텍스트 크기 및 타이포그래피

• Vuetify는 text-h1에서 text-h6까지 다양한 텍스트 스타일과 크기를 제공하며, 이러한 클래스들을 사용해 쉽게 텍스트 스타일을 적용할 수 있습니다.

• 문서: 텍스트 및 타이포그래피

<v-typography variant="h1">This is a headline</v-typography>
<v-typography variant="body-1">This is body text</v-typography>

컬러 팔레트

• Vuetify는 Material Design을 기반으로 한 색상 팔레트를 포함하고 있어, 애플리케이션 전반에 걸쳐 일관된 색상 테마를 쉽게 적용할 수 있습니다.

• 문서: Material Colors

아이콘 폰트

• Vuetify는 다양한 아이콘 폰트를 지원하며, Material Design Icons(MDI)와 쉽게 통합할 수 있습니다.

• 아이콘 검색 및 사용: Vuetify 아이콘 폰트

• MDI 전체 라이브러리 보기: MDI 아이콘 라이브러리

테마 커스터마이징

• Vuetify에서 애플리케이션의 테마를 커스터마이징할 수 있습니다. 테마 값은 myCustomLightTheme 객체를 수정하여 변경할 수 있습니다.

• 문서: 테마 설정

const vuetify = createVuetify({
  theme: {
    themes: {
      light: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        error: '#b71c1c',
      },
    },
  },
});

컬러 속성

• Vuetify의 컬러 속성을 사용하여 Material Design의 색상 시스템으로 컴포넌트를 스타일링할 수 있습니다.

• 문서: 컬러 속성

간격(Spacing) 유틸리티

• Vuetify는 마진과 패딩을 쉽게 관리할 수 있는 간격 유틸리티를 제공합니다.

• 문서: 간격 유틸리티

그리드 시스템 (Col 속성)

• Vuetify의 그리드 시스템은 Flexbox를 기반으로 하며, 강력한 레이아웃 시스템을 제공합니다.

• 문서: 그리드 및 Col 속성

컴포넌트

텍스트 필드

• 텍스트 필드는 사용자로부터 텍스트 입력을 받기 위한 주요 폼 요소입니다.

• 문서: 텍스트 필드

<v-form>
  <v-text-field label="Name" v-model="name"></v-text-field>
  <v-select :items="['Option 1', 'Option 2']" label="Select an option"></v-select>
  <v-checkbox label="Accept Terms" v-model="accepted"></v-checkbox>
</v-form>

라디오 버튼

• 라디오 버튼은 목록에서 하나의 옵션을 선택할 때 사용됩니다.

• 문서: 라디오 버튼

다이얼로그(Dialog)

• 다이얼로그는 중요한 정보나 사용자의 결정을 요청하는 모달 창입니다.

• 예시: 다이얼로그 사용법

<v-dialog v-model="dialog">
  <v-card>
    <v-card-title>Dialog Title</v-card-title>
    <v-card-text>
      This is a dialog content.
    </v-card-text>
    <v-card-actions>
      <v-btn @click="dialog = false">Close</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

데이터 테이블

• 데이터 테이블은 구조화된 데이터를 표 형식으로 표시하는 데 사용되며, 정렬, 페이징, 검색 등의 기능을 제공합니다.

• 문서: 데이터 테이블

<v-data-table :headers="headers" :items="items" :search="search">
  <template v-slot:top>
    <v-text-field v-model="search" label="Search"></v-text-field>
  </template>
</v-data-table>

카드

• 카드는 다양한 유형의 콘텐츠를 표시하는 데 유용한 유연한 컨테이너입니다.

• 예시: 카드 사용법

<v-card>
  <v-card-title>Card Title</v-card-title>
  <v-card-subtitle>Card Subtitle</v-card-subtitle>
  <v-card-text>
    This is some text within a card.
  </v-card-text>
  <v-card-actions>
    <v-btn text>Action</v-btn>
  </v-card-actions>
</v-card>

셀렉트 입력

• 셀렉트 입력은 목록에서 옵션을 선택할 수 있도록 합니다.

• 문서: 셀렉트 입력

내비게이션 드로어

• 내비게이션 드로어는 사이드 메뉴를 제공하며, 토글로 표시하거나 숨길 수 있습니다.

• 문서: 내비게이션 드로어

리스트

• 리스트는 관련된 콘텐츠를 그룹화하여 표시하는 데 사용됩니다.

• 문서: 리스트

칩

• 칩은 복잡한 엔티티를 컴팩트한 형태로 표현하는 작은 컴포넌트입니다.

• 예시: 칩 사용법

• API 문서: v-chip API

Vuetify는 Vue.js 기반의 Material Design 컴포넌트 프레임워크로, 반응형 UI를 쉽게 만들 수 있습니다.

기존의 To-Do 리스트 애플리케이션에 Vuetify를 적용하여 스타일을 개선하고, Vuetify의 컴포넌트를 활용하여 UI를 향상시켜보겠습니다.

1. Vuetify 설치

먼저 Vuetify를 프로젝트에 설치합니다.

1. 터미널에서 Vuetify 설치:

vue add vuetify

vue add vuetify 를 할 경우 4가지 선택지가 나오는데
vuetify2 를 할 것인지, 그리고 vue-cli 를 할 것인지에 대한 선택지가 나오는데
vuetify3 및 vite 라는 빌드툴을 사용하기로 했습니다. (최신버젼이기 때문) 

Vuetify 3 + Vite의 장점

A. 빠른 빌드 속도:

• Vite는 빌드 도구로서 매우 빠른 속도를 자랑합니다. 특히 개발 중에 실시간으로 코드 변경 사항을 반영하는 속도가 빠르기 때문에, 대규모 프로젝트에서 매우 유용합니다.

• Vite는 기본적으로 ES 모듈을 기반으로 작동하므로, 빌드 과정이 간소화되고 빠릅니다.

B. 최신 기능:

• Vuetify 3는 Vuetify의 최신 버전으로, 최신 Vue.js 기능들을 활용할 수 있습니다. 특히, Composition API와 함께 사용할 때 더욱 강력한 기능을 제공합니다.

• Vuetify 3은 새로운 디자인 시스템과 개선된 컴포넌트 구조를 제공하여 UI 개발에 더 나은 경험을 제공합니다.

C. 미래 지향적:

• Vite와 Vuetify 3은 모두 Vue.js 커뮤니티에서 적극적으로 지원하는 최신 도구들입니다. 이를 사용하면 최신 기술을 습득하고 미래의 프로젝트에서 활용할 준비를 할 수 있습니다.

Vuetify 3 + Vite의 단점 및 고려사항

A. 호환성 문제:

• Preview 단계: Vuetify 3은 아직 preview 단계이므로, 일부 기능이 불안정할 수 있으며, 공식적으로 모든 기능이 완전히 지원되지 않을 수 있습니다.

• 플러그인 호환성: Vuetify 3과 Vite를 사용하면, 기존의 일부 Vue.js 플러그인 또는 Vuetify 2에서 사용하던 플러그인들이 호환되지 않을 수 있습니다.

B. 러닝 커브:

• Vite는 Webpack과는 다른 접근 방식을 취하기 때문에, 기존에 Webpack에 익숙한 개발자라면 Vite의 설정과 동작 방식에 적응하는 데 약간의 시간이 걸릴 수 있습니다.

C. 안정성:

• Vite와 Vuetify 3의 조합은 최신 기술 스택이기 때문에, 프로젝트에 사용하기 전에 충분한 테스트가 필요할 수 있습니다. 대규모 프로젝트나 프로덕션 환경에서 사용할 때는 사전 검토가 중요합니다.

2. 프로젝트 실행:

설치가 완료된 후, 프로젝트를 다시 실행하여 Vuetify가 정상적으로 적용되었는지 확인합니다.

npm run dev

1). App.vue에서 Vuetify 레이아웃 적용

Vuetify의 기본 레이아웃 컴포넌트인 v-app, v-container, v-row, v-col 등을 사용하여 레이아웃을 설정합니다.

<template>
  <v-app>
    <v-container>
      <v-row>
        <v-col>
          <h1 class="text-center">Vue.js To-Do App</h1>
          <AddTodo @add-todo="addTodo" />
          <ToDoList :todos="todos" @remove-todo="removeTodo" @save-todos="saveTodos" />
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
import AddTodo from './components/AddTodo.vue';
import ToDoList from './components/ToDoList.vue';

export default {
  name: 'App',
  components: {
    AddTodo,
    ToDoList
  },
  data() {
    return {
      todos: []
    };
  },
  mounted() {
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      this.todos = JSON.parse(savedTodos);
    }
  },
  methods: {
    addTodo(newTodo) {
      this.todos.push({ text: newTodo, completed: false });
      this.saveTodos();
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
      this.saveTodos();
    },
    saveTodos() {
      localStorage.setItem('todos', JSON.stringify(this.todos));
    }
  }
};
</script>

<style>
.text-center {
  text-align: center;
}
</style>

3. AddTodo.vue에 Vuetify 컴포넌트 적용

AddTodo.vue 컴포넌트에서 Vuetify의 입력 및 버튼 컴포넌트를 사용합니다.

<template>
    <v-row class="mb-3">
      <v-col>
        <v-text-field
          v-model="newTodo"
          label="Add a new to-do"
          outlined
          dense
          @keyup.enter="submitTodo"
        />
      </v-col>
      <v-col cols="auto">
        <v-btn color="primary" @click="submitTodo">Add</v-btn>
      </v-col>
    </v-row>
  </template>
  
  <script>
  export default {
    name: 'AddTodo',
    data() {
      return {
        newTodo: ''
      };
    },
    methods: {
      submitTodo() {
        if (this.newTodo.trim()) {
          this.$emit('add-todo', this.newTodo);
          this.newTodo = '';
        }
      }
    }
  };
  </script>

4. TodoList.vue에 Vuetify 컴포넌트 적용

TodoList.vue 컴포넌트에서도 Vuetify의 리스트, 체크박스, 버튼 컴포넌트를 사용합니다.

<template>
  <v-list>
    <v-list-item
      v-for="(todo, index) in todos"
      :key="index"
      :class="{ 'completed': todo.completed }"
    >
      <v-row align="center" no-gutters>
        <v-col cols="auto" class="mr-3">
          <v-checkbox
            v-model="todo.completed"
            @change="saveTodos"
            hide-details
          />
        </v-col>
        <v-col>
          <v-list-item-content>
            <v-list-item-title>{{ todo.text }}</v-list-item-title>
          </v-list-item-content>
        </v-col>
        <v-col cols="auto">
          <v-btn icon small @click="removeTodo(index)">
            <v-icon>mdi-delete</v-icon>
          </v-btn>
        </v-col>
      </v-row>
    </v-list-item>
  </v-list>
</template>

<script>
export default {
  name: 'TodoList',
  props: {
    todos: {
      type: Array,
      required: true
    }
  },
  methods: {
    removeTodo(index) {
      this.$emit('remove-todo', index);
    },
    saveTodos() {
      this.$emit('save-todos');
    }
  }
};
</script>

<style scoped>
.completed .v-list-item__title {
  text-decoration: line-through;
  color: grey;
}
</style>

전체 코드 요약

App.vue

• Vuetify의 레이아웃 컴포넌트(v-app, v-container, v-row, v-col)을 사용하여 구조를 만듭니다.

AddTodo.vue

• Vuetify의 v-text-field와 v-btn을 사용하여 입력 필드와 버튼을 구현합니다.

TodoList.vue

• Vuetify의 v-list, v-checkbox, v-btn, v-icon을 사용하여 할 일 리스트와 삭제 버튼을 구현합니다.

이전 블로그