PrimeVue DataTable not Showing

Question

I am trying to use PrimeVue and use the DataTable Component - but it is not showing? Seems to be some type of $slots error? Button component is rendering and working as expected. Table.vue

<template>
    <div>
        <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>
        <ColorPicker v-model="color" />
    </div>
</template>

<script>

    import DataTable from "primevue/datatable";
    import Column from "primevue/column";
    import ColorPicker from 'primevue/colorpicker';

    export default {

        name: "Table",
        props: {
        },
        data() {
            return {
                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"}
                ],
                color: '1976D2'

            }
        },
        components: {
            DataTable,
            Column,
            ColorPicker
        },
    }
</script>


<style scoped>

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
// Importing the Nova Light PrimeVue theme styles
import 'primevue/resources/themes/rhea/theme.css';

// Importing the base PrimeVue component styles
import 'primevue/resources/primevue.min.css';

// Importing the base PrimeIcon styles
import 'primeicons/primeicons.css';

Vue.prototype.$http = axios

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

The dataTable shows in the Vue DevTools: DataTable in tools

I am getting this error in console "TypeError: this.$slots.default is not a function":

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: this.$slots.default is not a function"

found in

---> <DataTable> at node_modules/primevue/components/datatable/DataTable.vue
       <Table> at src/components/Table.vue
         <App> at src/App.vue
           <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839



TypeError: this.$slots.default is not a function
    at VueComponent.headerColumnGroup (DataTable.vue?dffe:1705)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584)
    at VueComponent.computedGetter [as headerColumnGroup] (vue.runtime.esm.js?2b0e:4

How do I correct this error?

Answer 1

Edit: I added my answer before realising that the SO algorithm had showm me a question nearly 2 years old. I'm sure you've figured it out by now...

---

Having a very quick look, I've noticed that you don't have this:

import PrimeVue from 'primevue/config';

app.use(PrimeVue, { ripple: true });

In your main.js

Are you using Vue 2 or Vue 3?

I've only ever used it with vue 3, so my main.js is something like this:

import { createApp, reactive } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import router from './router';

// primevue
import PrimeVue from 'primevue/config';
import './assets/layout/layout.scss';

import 'primeflex/primeflex.min.css';
import 'primeicons/primeicons.css';
import 'primevue/resources/primevue.min.css';
import 'primevue/resources/themes/saga-blue/theme.css';
import 'primevue/resources/themes/fluent-light/theme.css';

// primevue components that get used multiple times throughout app
import Button from 'primevue/button';
// ... any others

// app has to be created after imports aparently
const app = createApp(App);

app.component('Button', Button); 
// ... any others

app.use(createPinia());
app.use(router);
app.use(PrimeVue, { ripple: true });


// globalProperties was designed for options API so instead of:
// app.config.globalProperties.$appState = reactive({ inputStyle: 'outlined' });
// I'm using provide/inject pattern instead: 
// https://vuejs.org/guide/components/provide-inject.html#provide
app.provide('$appState', reactive({ inputStyle: 'outlined' }));
app.provide('$primevue', app.config.globalProperties.$primevue);

// then in componentents that need access to them:
import { inject } from 'vue';
const $appState = inject('$appState');
const $primevue = inject('$primevue');