21. Vuetify로 UI 만들기

Vuetify로 UI 만들기

Vue 3와 Vuetify를 사용해서 AppBar, Navigation Drawer, Footer가 포함된 기본 레이아웃 UI를 만들어 드릴게요.
좋아요! 홈(Home), 로그인(Login), 계정 만들기(Register) 메뉴를 아이콘과 함께 Navigation Drawer에 배열로 만들어 표시하는 예제를 드릴게요. Vuetify 아이콘은 @mdi/js 기반이므로, v-icon에서 mdi-로 시작하는 이름을 사용해요.

 

🧱 기본 레이아웃 구조

• 상단: App Bar
• 좌측: Navigation Drawer
• 중앙: Router View or Main Content
• 하단: Footer

💡 설치가 되어 있어야 할 것

vue create my-app
cd my-app
vue add vuetify

 

또는 Vite 기반일 경우:

npm install vuetify@next

🧩 App.vue 예제

<template>
  <v-app>
    <!-- App Bar -->
    <v-app-bar app color="primary" dark>
      <v-app-bar-nav-icon @click="drawer = !drawer" />
      <v-toolbar-title>My Vuetify App</v-toolbar-title>
    </v-app-bar>

    <!-- Navigation Drawer -->
    <v-navigation-drawer app v-model="drawer" permanent>
      <v-list nav dense>
        <v-list-item
          v-for="item in menuItems"
          :key="item.title"
          :to="item.to"
          link
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <!-- Main Content -->
    <v-main>
      <v-container>
        <router-view />
      </v-container>
    </v-main>

    <!-- Footer -->
    <v-footer app color="primary" dark>
      <v-col class="text-center">&copy; 2025 My App</v-col>
    </v-footer>
  </v-app>
</template>

<script setup>
import { ref } from 'vue';

const drawer = ref(true);

// 메뉴 항목 배열
const menuItems = [
  { title: '홈', icon: 'mdi-home', to: '/' },
  { title: '로그인', icon: 'mdi-login', to: '/login' },
  { title: '계정 만들기', icon: 'mdi-account-plus', to: '/register' },
];
</script>

📦 설명

• v-app은 Vuetify의 root container예요.
• v-app-bar는 상단에 고정된 헤더바.
• v-navigation-drawer는 사이드바 메뉴.
• v-main은 실제 콘텐츠가 들어갈 부분.
• v-footer는 페이지 하단에 위치하는 푸터.

💡 참고 사항

• mdi-home: 홈 아이콘
• mdi-login: 로그인 아이콘
• mdi-account-plus: 계정 추가 아이콘
• :to="item.to"는 Vue Router의 라우팅에 사용되므로, vue-router를 설정해 둔 상태여야 제대로 작동해요.