[Frontend/Nuxt] Nuxt3에서 달력 라이브러리 사용하기

달력을 직접 커스텀하기에는 시간 상 한계가 있을 것 같아서 나와 있는 달력 라이브러리를 사용하고자 했다.

But,

(1) vuetify에서 제공하는 v-calendar 라이브러리 사용 - native component는 등록하라며 에러 발생

(2) v-calendar 라이브러리 사용 - maximum stack size 어쩌고... 발생 

으로 몇 시간 가량 삽질을 하다가...

Nuxt에서 SSR로 동작할 때 문제가 발생하며, 라이브러리를 다르게 사용해야 한다는 것을 알게 되어서 내용 기록해 둔다! 

 

---

 

우선 내가 사용한 건 이 v-calendar 라이브러리이다.

Welcome | VCalendar

 

(1) 설치하기

yarn add v-calendar@next @popperjs/core

 

 

(2) 플러그인 등록

-1. plugins > v-calendar.ts 파일 만들기 

import VCalendar from "v-calendar";
// import 'v-calendar/style.css';
import "~/assets/scss/v-calendar.css";

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VCalendar);
});

 

-2. nuxt.config.ts 에 플러그인 등록 

*client 모드로 설정 필必

plugins: [
        {
            src: "~/plugins/v-calendar",
            mode: "client",
        },
    ],

 

(3) 컴포넌트 사용

*CSR에서만 동작하므로 태그로 감싸 주어야 함! 

<template>
    <client-only>
        <VCalendar
            style="width: 90%"
            trim-weeks
            :attributes="attributes"
            @dayclick="onDayClick"
        />
    </client-only>
</template>

완성! 

 

 

---

[참고] 

https://islet4you.tistory.com/entry/v-calendar-Nuxt3%EC%97%90%EC%84%9C-V-calendar-%EC%84%B8%ED%8C%85