Vuetify와 Nuxt를 활용한 Composition API 기반 실무 예제

 

 

안녕하세요, 개발자 여러분! 오늘은 Nuxt와 Vuetify를 결합하여 Composition API를 활용한 실무에서 유용할 만한 다양한 사례를 블로그 형식으로 소개해드릴게요. Vue 3의 강력한 Composition API와 Vuetify의 Material Design 컴포넌트를 Nuxt 환경에서 어떻게 실무에 적용할 수 있는지, 실제로 자주 마주칠 법한 케이스를 중심으로 살펴보겠습니다. 초보자도 따라 할 수 있도록 단계별로 설명할 테니, 차근차근 따라와 보세요!

---

환경 설정: Nuxt와 Vuetify 통합

먼저, Nuxt 프로젝트에 Vuetify를 설정하는 방법부터 간단히 짚고 넘어가겠습니다. Nuxt 3와 Vuetify 3를 사용한다고 가정하고, 아래와 같이 설정을 시작합니다.

1. 프로젝트 생성 및 Vuetify 설치

   npx nuxi init my-vuetify-app
   cd my-vuetify-app
   npm install
   npm install vuetify vite-plugin-vuetify sass

2. Nuxt 설정 (nuxt.config.ts)

   import vuetify from 'vite-plugin-vuetify';
   
   export default defineNuxtConfig({
     modules: [
       async (options, nuxt) => {
         nuxt.hooks.hook('vite:extendConfig', (config) =>
           config.plugins.push(vuetify())
         );
       },
     ],
     vite: {
       ssr: {
         noExternal: ['vuetify'],
       },
     },
   });

3. Vuetify 플러그인 추가 (plugins/vuetify.ts)

   import { createVuetify } from 'vuetify';
   import 'vuetify/styles';
   
   export default defineNuxtPlugin((nuxtApp) => {
     const vuetify = createVuetify({
       ssr: true,
     });
     nuxtApp.vueApp.use(vuetify);
   });

이제 기본 설정이 완료되었으니, 실무에서 자주 쓰이는 사례를 Composition API로 구현해보겠습니다.

---

 

 

케이스 1: 반응형 데이터 테이블 (상품 목록)

실무에서 자주 보게 되는 데이터 테이블을 Vuetify의 <v-data-table>과 Composition API로 구현해보겠습니다. 예를 들어, 전자상거래 사이트의 상품 목록을 표시한다고 가정합니다.

코드 예제

<!-- pages/products.vue -->
<template>
  <v-container>
    <v-data-table
      :headers="headers"
      :items="products"
      :loading="loading"
      class="elevation-1"
    >
      <template #top>
        <v-text-field
          v-model="search"
          label="상품 검색"
          prepend-inner-icon="mdi-magnify"
          variant="outlined"
        />
      </template>
    </v-data-table>
  </v-container>
</template>

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

const headers = [
  { title: '상품명', key: 'name' },
  { title: '가격', key: 'price' },
  { title: '재고', key: 'stock' },
];

const products = ref([]);
const loading = ref(false);
const search = ref('');

const fetchProducts = async () => {
  loading.value = true;
  try {
    const response = await $fetch('/api/products'); // 가정된 API 엔드포인트
    products.value = response;
  } catch (error) {
    console.error('상품 불러오기 실패:', error);
  } finally {
    loading.value = false;
  }
};

onMounted(fetchProducts);
</script>

설명

• Composition API 활용: ref로 반응형 상태를 관리하고, onMounted로 페이지 로드 시 데이터를 가져옵니다.
• Vuetify 컴포넌트: <v-data-table>로 테이블을 구성하고, 검색 필드를 추가해 사용자 경험을 개선했습니다.
• 실무 팁: 실제 프로젝트에서는 검색어에 따라 데이터를 필터링하는 로직을 추가하거나, 페이지네이션을 구현할 수 있습니다.

---

케이스 2: 다이내믹 폼 (사용자 정보 입력)

사용자 정보 입력 폼은 회원가입이나 프로필 수정 같은 시나리오에서 자주 등장합니다. Vuetify의 폼 컴포넌트와 Composition API를 결합해 유효성 검사까지 포함한 예제를 만들어보죠.

코드 예제

<!-- components/UserForm.vue -->
<template>
  <v-form @submit.prevent="submitForm">
    <v-text-field
      v-model="form.name"
      label="이름"
      :rules="[v => !!v || '이름을 입력하세요']"
      required
    />
    <v-text-field
      v-model="form.email"
      label="이메일"
      :rules="[v => /.+@.+\..+/.test(v) || '유효한 이메일을 입력하세요']"
      required
    />
    <v-btn type="submit" color="primary">제출</v-btn>
  </v-form>
</template>

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

const form = reactive({
  name: '',
  email: '',
});

const submitForm = () => {
  if (!form.name || !form.email) {
    alert('모든 필드를 채워주세요!');
    return;
  }
  console.log('제출된 데이터:', form);
  // API 호출 로직 추가 가능
};
</script>

설명

• Reactive 객체: reactive를 사용해 폼 데이터를 관리하며, 실시간으로 반영됩니다.
• Vuetify 폼: <v-form>과 <v-text-field>를 활용해 깔끔한 UI와 유효성 검사를 구현했습니다.
• 실무 팁: 서버로 데이터를 전송하는 API 호출을 추가하거나, 에러 메시지를 다이얼로그로 표시할 수 있습니다.

---

 

 

케이스 3: 모달 다이얼로그 (삭제 확인)

삭제 버튼을 눌렀을 때 확인 모달을 띄우는 기능은 관리자 대시보드에서 흔히 사용됩니다. Vuetify의 <v-dialog>와 Composition API를 활용해 구현해보겠습니다.

코드 예제

<!-- components/DeleteConfirm.vue -->
<template>
  <div>
    <v-btn color="error" @click="dialog = true">삭제</v-btn>
    <v-dialog v-model="dialog" max-width="400">
      <v-card>
        <v-card-title>정말 삭제하시겠습니까?</v-card-title>
        <v-card-actions>
          <v-spacer />
          <v-btn text @click="dialog = false">취소</v-btn>
          <v-btn color="error" @click="confirmDelete">확인</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

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

const dialog = ref(false);

const confirmDelete = () => {
  console.log('삭제 실행!');
  dialog.value = false;
  // 실제 삭제 API 호출 추가 가능
};
</script>

설명

• Dialog 상태 관리: ref로 모달의 열림/닫힘 상태를 관리합니다.
• Vuetify 다이얼로그: <v-dialog>로 간단히 모달을 구성했습니다.
• 실무 팁: 삭제 후 목록을 갱신하려면 상위 컴포넌트로 이벤트를 emit하거나, 상태 관리 도구를 사용할 수 있습니다.

---

마무리

오늘은 Nuxt와 Vuetify를 활용해 Composition API로 실무에서 자주 쓰이는 데이터 테이블, 폼, 모달 다이얼로그를 구현해보았습니다. Composition API의 유연성과 Vuetify의 풍부한 컴포넌트를 결합하면, 코드 가독성과 재사용성이 크게 향상됩니다. 실무에서는 여기에 API 연동, 상태 관리(Pinia 등), 그리고 에러 처리를 추가해 더 견고한 애플리케이션을 만들어보세요.