v-data-table component not found

Question

I am trying to create a sudo data table using vuetify. The purpose is to render dynamically computed data using v-data-table

However, I am having trouble adding Vuetify to my application.

I tried adding

vue.use(Vuefity)

but it throws an error -> Property 'use' does not exist on type 'typeof

This is what my code looks like

computed: {
      headers(): string[] {
        return ["test1"]
      },
      items(): string[] {
        return ["test", "t2"];
      }
}

<div>
    This is new data
    {{items[0]}}
    <v-data-table
       :items-per-page="5"
       :items="items"
       :headers="headers"
       class="elevation-1"> 
    </v-data-table>
</div>

This is what my main.ts looks like

import { createApp } from 'vue'
import Vue from 'vue'
import App from './App.vue'

import "vuetify/dist/vuetify.min.css"
import Vuetify from "vuetify"


//Vue.use(Vuetify);
//Vue.readonly(Vuetify);

createApp(App).mount('#app')

When I trying running the code the browser is unable to detect v-data-table. And throws the following error:

Failed to resolve component: v-data-table

Answer 1

Currently, Some components of Vuetify are not ready for production use in Vue 3. But there is a way to use it in the project. You can check further details in its official documentation of Vuetify from here

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

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