[v-calendar] Nuxt3에서 V-calendar 세팅

Nuxt3에서 UI프레임워크로 Vuetify3를 사용하기로 했다.

하지만 Vuefity3에서는 Date Picker를 포함한 calendar 기능을 아직은 지원하지 않고 있다.

해서 V-calendar를 사용하기로했다.

https://vcalendar.io/

Welcome | VCalendar

 

1. plugin 설치

yarn add v-calendar@next @popperjs/core

npm install v-calendar@next @popperjs/core

 

 

2. plugins/v-calendar.ts

// plugins/v-calendar.ts

import VCalendar from 'v-calendar';
import 'v-calendar/style.css';

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

 

3. nuxt.config.ts 설정

export default defineNuxtConfig({

    .
    .
    .
    
    plugins: [
        {
            src:'~/plugins/v-calendar', mode: 'client'
        }
    ],
});

 

4. 사용

<template>
  <div> 
    <client-only>
      <Calendar locale="ko" :attributes="attributes" />
    </client-only>
  </div>
</template>

<script setup>
import { Calendar } from 'v-calendar';

const attributes = ref([
  {
    highlight: true,
    dates: {
      start: new Date(2022, 10, 7),
      repeat: {
        every: [2, 'weeks'],
        weekdays: 2,
      },
    },
  },
]);
</script>

 

<client-only> 태그로 감싸서 사용해야 아래와같은 Hydration node mismatch 경고 메시지가 뜨지 않았다.