[ vue.js ] vue3 vuetify 라이브러리 사용 이슈 (feat. v-data-table)

vue3 버전을 사용하면서 v-data-table을 사용하려고 하는 데 작동이 정상적으로 되지 않는 이슈가 발생했다. 

구글에 검색해보니 이런 경우가 종종 있는 것 같았고, 다른 사람은 vuetify3 버전엔 언제 생기냐는 문의 글을 남겨서 내 vuetify 버전을 살펴보니 3...

그래도 안되서 포기하고 있다가 댓글을 살펴보게 되었는데...ㅎㅎ...

 

 

이 댓글을 발견하고 바로 vuetify에 검색해보았다.

 

Labs는 개발자가 알파 상태에서 완성되지 않은 구성 요소를 사용할 수 있는 방법이다. 

 

• 지역으로 설정

<template>
 <v-data-table />
</template>
<script setup>
 import { VDataTable } from "vuetify/labs/VDataTable"
</script>

• 전역으로 설정

import { createVuetify } from "vuetify"
import { VDataTable } from "vuetify/labs/VDataTable"

export default createVuetify({
components: {
	VDataTable
}
});

 

위와 같이 설정하고 v-data-table을 사용하게되면 정상적으로 UI가 그려지는 것을 확인할 수 있다.

https://vuetifyjs.com/en/labs/introduction/#vuetify-labs