CODEWITHSUNDEEP
typescriptvue.jsvuetify.jsvuejs3
user12140050
user12140050

Reputation: 129

v-data-table component not found

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

Upvotes: 6

Views: 14292

Answers (3)

Nathan Wailes
Nathan Wailes

Reputation: 12232

I was getting this error because I was using Vuetify 3.3.1 and the Data Table component was added as a default part of Vuetify in 3.4.0.

I deleted my package-lock.json, deleted my node_modules directory, changed my vuetify dependency in package.json to this: "vuetify": "^3.4.0",. I then ran npm install, npm run build, and then npm run dev.

Upvotes: 0

Hassan Fayyaz
Hassan Fayyaz

Reputation: 875

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,
 },
})

Upvotes: 18

Ashwin Bande
Ashwin Bande

Reputation: 3053

Vuetify dosent currently support vue3 use vue2. so Vue.use is not available in vue3 and because vuetify dosent added the v-data-table component is not available.

Upvotes: 1

Related Questions