Datatable doc example giving error in Vue 3 & TS

[ihelmer07]

I'm not sure why but i'm getting:

My code is a copy/paste from datatables docs: here

issueList.vue

<template>
  <div id="app">
    <DataTable :value="cars">
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>

  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'

export default defineComponent({
  name: 'App',
  components: {
    DataTable,
    Column,
  },
  data() {
    return {

      cars: [
        { 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' },
      ],
    }
  }
})

incase it matters - versions:

  "dependencies": {
    "@types/js-cookie": "^2.2.6",
    "axios": "^0.20.0",
    "core-js": "^3.6.5",
    "js-cookie": "^2.2.1",
    "primeicons": "^4.0.0",
    "primevue": "^2.1.0",
    "quill": "^1.3.7",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.6",
    "@vue/cli-plugin-eslint": "~4.5.6",
    "@vue/cli-plugin-router": "~4.5.6",
    "@vue/cli-plugin-typescript": "~4.5.6",
    "@vue/cli-plugin-vuex": "~4.5.6",
    "@vue/cli-service": "~4.5.6",
    "@vue/compiler-sfc": "^3.0.0-0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "lint-staged": "^9.5.0",
    "prettier": "^1.19.1",
    "typescript": "~3.9.3"
  },

[ihelmer07]

I've solved the issue by installing primevue@3.0.0-rc.2.

Maybe update the docs to show that its not simply

npm install primevue --save
npm install primeicons --save

as mentioned in the docs?

[cagataycivici]

We've fixed it just now with;

npm install primevue@^3.0.0 --save

Thank you.