Vuetify 문서 레퍼런스 가이드

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