Search code examples
vuejs3primevue

How to render primevue button?

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import PrimeVue from "primevue/config";
import Button from 'primevue/button'

import 'primevue/resources/themes/saga-blue/theme.css'
import 'primevue/resources/primevue.min.css'                 // core css
import 'primeicons/primeicons.css'


const app = new Vue({
  render: h => h(App),
})
app.$mount('#app')
app.use(PrimeVue)
app.component('Button', Button)

App.vue

<template>
  <div id="app">
    <NewCompany/>
  </div>
</template>

<script>
import NewCompany from './components/NewCompany'

export default {
  name: 'App',
  components: {
    NewCompany
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

components/NewCompany.vue

<template>
  <div>
      <Button label="New">Tes</Button>
      test
  </div>
</template>

<script>

import Button from 'primevue/button';


export default {
    name: 'NewCompany',
    components: {
        Button
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

div {
    border: 1px solid;
}
</style>

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

I am trying to render button based on this video from primevue documentation: https://www.youtube.com/watch?v=cGTXuyqIwMA&t=623s&ab_channel=CagatayCivici

It shows me no button: enter image description here

And when inspecting the html, there is this:

<div id="app"><div data-v-964ceb26=""><!----> test </div></div>

Errors in console:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Object(...) is not a function"

found in

---> <Button>
       <NewCompany> at src/components/NewCompany.vue
         <App> at src/App.vue
           <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1893
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
Vue._render @ vue.runtime.esm.js?2b0e:3571
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
patch @ vue.runtime.esm.js?2b0e:6521
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
patch @ vue.runtime.esm.js?2b0e:6521
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
patch @ vue.runtime.esm.js?2b0e:6560
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
eval @ main.js?56d7:17
./src/main.js @ app.js:1137
__webpack_require__ @ app.js:849
fn @ app.js:151
1 @ app.js:1150
__webpack_require__ @ app.js:849
checkDeferredModules @ app.js:46
(anonymous) @ app.js:925
(anonymous) @ app.js:928
Show 23 more frames
vue.runtime.esm.js?2b0e:1897 TypeError: Object(...) is not a function
    at Proxy.render (button.esm.js?5cfd:74)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081)
    at Watcher.get (vue.runtime.esm.js?2b0e:4495)
    at new Watcher (vue.runtime.esm.js?2b0e:4484)
    at mountComponent (vue.runtime.esm.js?2b0e:4088)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8459)
    at init (vue.runtime.esm.js?2b0e:3137)
    at createComponent (vue.runtime.esm.js?2b0e:6022)
    at createElm (vue.runtime.esm.js?2b0e:5969)
logError @ vue.runtime.esm.js?2b0e:1897
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
Vue._render @ vue.runtime.esm.js?2b0e:3571
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
patch @ vue.runtime.esm.js?2b0e:6521
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
patch @ vue.runtime.esm.js?2b0e:6521
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
patch @ vue.runtime.esm.js?2b0e:6560
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
eval @ main.js?56d7:17
./src/main.js @ app.js:1137
__webpack_require__ @ app.js:849
fn @ app.js:151
1 @ app.js:1150
__webpack_require__ @ app.js:849
checkDeferredModules @ app.js:46
(anonymous) @ app.js:925
(anonymous) @ app.js:928
Show 22 more frames
main.js?56d7:18 Uncaught TypeError: app.use is not a function
    at eval (main.js?56d7:18)
    at Module../src/main.js (app.js:1137)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1150)
    at __webpack_require__ (app.js:849)
    at checkDeferredModules (app.js:46)
    at app.js:925
    at app.js:928

Why it tells object is not a fuction? Which object it is talking about?

Solution

  • First thing - the installed version is 2, needed to reinstal to version 3. When installing with vue cli, it gives a menu to choose version.

    components/NewCompany.vue

    <template>
  <div>
      <Button label="New"></Button>
  </div>
</template>

<script>

import Button from "primevue/button";

export default {
  name: 'NewCompany',
  components: {
      Button
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* todo use bootstrap */
    div {
        border: 1px solid;
        text-align: left;
    }
</style>

    App.vue

    <template>
  <NewCompany/>
</template>

<script>
import NewCompany from './components/NewCompany.vue'

export default {
  name: 'App',
  components: {
    NewCompany
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

    main.js

    import { createApp } from 'vue'
import App from './App.vue'

import 'primevue/resources/themes/saga-blue/theme.css'
import 'primevue/resources/primevue.min.css'                 // core css
import 'primeicons/primeicons.css'

createApp(App).mount('#app')