4. Vue(with Vuetify)와 Firebase로 서버리스 PWA myBlog 개발 - Vuetify

Vuetify란?

Vuetify는 Vue.js를 기반으로 하는 Material Design 컴포넌트 프레임워크입니다. Google의 Material Design 가이드라인을 준수하며, Vue 애플리케이션에 세련되고 반응형 UI를 손쉽게 구축할 수 있도록 다양한 UI 컴포넌트를 제공합니다.

Vuetify의 주요 특징

Material Design:

• Google Material Design의 원칙을 기반으로 구축된 UI 컴포넌트를 제공.

풍부한 UI 컴포넌트:

• 버튼, 카드, 데이터 테이블, 폼 입력 등 다양한 컴포넌트를 내장.

반응형 디자인:

• 모바일, 태블릿, 데스크톱 등 다양한 화면 크기에 최적화된 디자인.

테마 설정:

• 다크/라이트 모드 및 커스터마이징 가능한 테마 지원.

유연한 그리드 시스템:

• Vue 기반으로 반응형 레이아웃을 쉽게 구현 가능.

국제화 지원 (i18n):

• 다국어 지원 기능 내장.

손쉬운 확장:

• 플러그인 기반으로 쉽게 기능 확장 가능.

기본 사용법

1. Vuetify 설정

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

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

2. Vuetify 컴포넌트 사용

Vuetify 컴포넌트를 사용하려면 템플릿에서 다음과 같이 작성합니다:

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-btn color="primary">Primary Button</v-btn>
        <v-card>
          <v-card-title>Vuetify Card</v-card-title>
          <v-card-text>This is a Vuetify card component!</v-card-text>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

Vuetify 주요 컴포넌트

1. 버튼

<v-btn color="primary" @click="onClick">Click Me</v-btn>

• 다양한 색상, 아이콘, 크기 지원.
• @click 이벤트를 통해 클릭 동작 처리.

2. 카드

<v-card>
  <v-card-title>Card Title</v-card-title>
  <v-card-text>Card content goes here.</v-card-text>
  <v-card-actions>
    <v-btn color="primary">Action</v-btn>
  </v-card-actions>
</v-card>

3. 폼 입력

<v-text-field label="Enter your name" v-model="name"></v-text-field>

• v-text-field, v-select, v-checkbox 등 다양한 폼 요소 지원.

5. 4. 데이터 테이블

<v-data-table
  :headers="headers"
  :items="items"
  item-value="name"
  class="elevation-1"
/>

• 정렬, 필터링, 페이징 기능 포함.

5. 그리드 시스템

<v-container>
  <v-row>
    <v-col cols="12" md="6">
      Left Column
    </v-col>
    <v-col cols="12" md="6">
      Right Column
    </v-col>
  </v-row>
</v-container>

6. 다이얼로그

<v-dialog v-model="dialog">
  <template v-slot:activator="{ on, attrs }">
    <v-btn v-bind="attrs" v-on="on">Open Dialog</v-btn>
  </template>
  <v-card>
    <v-card-title>Dialog Title</v-card-title>
    <v-card-text>Some content for the dialog</v-card-text>
    <v-card-actions>
      <v-btn text @click="dialog = false">Close</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>