Unable to use Primevue

[abhijeetjain]

Hey Guys
Need some help here

So basically I was just trying to set up the primevue for the first time (a simple button from primevue) but its not rendering that.
I am using Vue 2.6.11 with typescript 3.9.3 along with property-decorators.

code for the component:

Code: Select all

<template>
    <div class="dashboard">
        <strong>
            <h1>{{`Main Toolbar Coming Soon...`}}</h1>
            <PrimeBtn :label='sampleText' >{{sampleText}}</PrimeBtn>
        </strong>
        </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {Button as PrimeBtn} from 'primevue/button';

@Component({
  components: {
    PrimeBtn
  }
})
export default class MainToolbar extends Vue {
  public sampleText: string= 'sample content';
  mounted () {
    console.log('MOUNTED')
  }
}
</script>
<style scoped lang="scss">

</style>

package.json:

Code: Select all

{
  "name": "something",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "start": "node server.ts"
  },
  "engines": {
    "node": "^12.8.1"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "express": "^4.17.1",
    "primeicons": "^4.1.0",
    "primevue": "2.0.0",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@types/express": "^4.17.9",
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^1.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "lint-staged": "^9.5.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {},
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      }
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel"
  }
}

Can anyone let me know what am I missing?

PS: appologies if I posted at the wrong place, still new here. Please let me know where to post in that case.

Thanks