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

Hassan Fayyaz · Accepted Answer · 2023-03-11 21:18:54Z

18

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

answered Mar 11, 2023 at 21:18

Hassan Fayyaz

8851 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Egelbets Over a year ago

To add to this: if you added Vuetify to an existing project, the documentation tells you to import * as components from 'vuetify/components' and to then pass that on to createVuetify() under the components key. You can add labs components to this by unpacking the components variable and adding the VDataTable import: components: { ...components, VDataTable }.

Ashwin Bande · Accepted Answer · 2021-01-11 15:26:18Z

1

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.

answered Jan 11, 2021 at 15:26

Ashwin Bande

3,1232 gold badges13 silver badges23 bronze badges

2 Comments

user12140050 Over a year ago

Vue3 is sort of a requirement. Is there any alternative to vuetify that works for vue 3?

db2 Over a year ago

Why is Vue 3 a requirement? Vue docs say Vue3 isn't ready for prod apps, so it really shouldn't be a requirement. The best thing to do right now is use the composition-api plugin with vue2 and then you can use Vuetify. Otherwise you're going to be out of luck.

Nathan Wailes · Accepted Answer · 2024-04-10 01:27:25Z

0

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.

answered Apr 10, 2024 at 1:27

Nathan Wailes

12.6k10 gold badges77 silver badges118 bronze badges

Collectives™ on Stack Overflow

v-data-table component not found

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related