PrimeVue datatable components not working in vue3

Question

I'm using PrimeVue fatatable for my website, but even though I've installed all requirements nothing shows up for me. there's only a warning coming up:

Failed to resolve component: data-table
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

in main.js

import PrimeVue from 'primevue/config'
import Column from 'primevue/column'
import Dialog from 'primevue/dialog'
import DataTable from 'primevue/datatable'
appInstance.use(PrimeVue)
appInstance.component('Column', Column)
appInstance.component('Dialog', Dialog)
appInstance.component('Datatable', DataTable)

in userTable.vue:

<data-table :value="products">
     <Column field="brand" header="Brand"></Column>
     <Column field="year" header="Year"></Column>
     <Column field="color" header="Color"></Column>
     <Column field="vin" header="Vin"></Column>
</data-table>

and an example of products in data():

products: [
        {"brand": "Volkswagen", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
        {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
        {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
        {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
        {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
        {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
        {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
        {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
        {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
        {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
      ],

It's vue 3 I'm working on, so if anyone knows the reason and solution by anychance, I'll be so glad :')

In your userTable.vue component, have you tried to call the component with <datatable></datatable> instead (without the -) ? Because in your main.js you register it as Datatable not DataTable — Jedupont
– Jedupont, Commented Jun 15, 2022 at 10:12
Did it just now, but there's no difference. still nothing is showing — Sanaz Baghban
– Sanaz Baghban, Commented Jun 15, 2022 at 10:18
Currently it's a typo. It should be DataTable and not Datatable. There should be a difference. If it still doesn't work, please, provide stackoverflow.com/help/mcve for your problem — Estus Flask
– Estus Flask, Commented Jun 15, 2022 at 11:14

rxon · Accepted Answer · 2024-04-12 08:39:08Z

1

I suggest you to use autoimport instead of that way. First install unplugin-vue-components via npm install unplugin-vue-components

Second, add these lines into your vite.config.ts:

//...
import Components from "unplugin-vue-components/vite"; 
import { PrimeVueResolver } from "unplugin-vue-components/resolvers";
//...
export default defineConfig({
     plugins: [
         //...
         Components({
               resolvers: [PrimeVueResolver()],
         }),
         //...
     ],
});
//...

More details here: Auto Import - Prime Vue

edited Apr 12, 2024 at 8:39

answered Apr 12, 2024 at 8:36

rxon

93 bronze badges

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

Comments

Diego Hernández · Accepted Answer · 2022-07-07 20:24:05Z

0

You are typing the tag wrong I suggest you change as follows:

appInstance.component('Datatable', DataTable)

by

appInstance.component('DataTable', DataTable)

In the component

<DataTable :value="products">
     <Column field="brand" header="Brand"></Column>
     <Column field="year" header="Year"></Column>
     <Column field="color" header="Color"></Column>
     <Column field="vin" header="Vin"></Column>
</DataTable>

answered Jul 7, 2022 at 20:24

Diego Hernández

8305 silver badges14 bronze badges

Collectives™ on Stack Overflow

PrimeVue datatable components not working in vue3

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related