Shadow Smith

Posted on Jan 22, 2020

Love Vuetify? Meet PrimeVue, a powerful new Vue UI Library.

#vue #javascript #tutorial #webdev

Every Vue developer knows of Vuetify, the full-featured Vue UI library based on Google's Material Design Guidelines, but this article isn't about it at all.

This article is about PrimeVue.

A new UI library on the block by PrimeTek Informatics, that's boasting itself as "The most complete UI framework for Vue".

In the official press release, PrimeTek said...

PrimeVue is the most complete UI Component suite for Vue featuring over 50 components, theme designer, various VueCLI templates and professional support.

...and I can confirm that PrimeVue's Component Docs definitely back their claims, but you don't have to just take my word for it, check it out yourself.

Now that you're pumped and ready to get your feet wet with PrimeVue, let's set up a Vue tinker project and mess around with a PrimeVue Button component.

Setting up your Vue project

Open your terminal, navigate to where you want this project to be stored and do the following command.

vue create primevue-playground

Since we're just focused on playing with PrimeVue's components, pick default (babel, eslint).

? Please pick a preset:
> default (babel, eslint)
  Manually select features

Once your Vue project is set up, cd into it and add PrimeVue and PrimeIcons using npm.

cd primevue-playground && npm i primevue primeicons

Open your project in your code editor.

code .

Start your development server.

npm run serve

And then navigate to http://localhost:8080/ or whatever localhost URL is shown in your terminal.

If you see the traditional Vue boilerplate landing page, you're good and ready to move on.

Removing boilerplate fluff

Navigate to App.vue and copy/paste the following into it...

    <template>
      <div id="app">
        // PrimeVue Components will go here
      </div>
    </template>

    <script>

    export default {
      name: 'app'
    }

    </script>

And just to be tidy, delete the HelloWorld.vue component from your src/components/ directory.

Adding CSS dependencies

In order for PrimeVue styles to be applied, you have to import a few CSS dependencies in your main.js file like this.

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

    // Importing the Nova Light PrimeVue theme styles
    import 'primevue/resources/themes/nova-light/theme.css';

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

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

    Vue.config.productionTip = false

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

Notice the import of the theme styles?

Yeah, PrimeVue comes out-of-the-box with 9 different free themes.

You can use one of those 9, hack on the CSS yourself, buy one of 6 of their other premium themes, or purchase a license to use their Prime Designer API to make your own.

Also, this is a good time to say that I am not sponsored by PrimeTek, and this isn't an affiliate promotion. I'm just letting you know your style customization options.

Setting the stage for playing with PrimeVue components

This step is totally optional, but I like to center components in the middle of the screen when I mess around with them, and I thought you might to.

To do this, add this <style> tag and everything in it to the bottom of your App.vue file.

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

Once you do this, your App.vue file should look like this.

    <template>
      <div id="app">
        //  PrimeVue Components will go here
      </div>
    </template>

    <script>

    export default {
      name: 'app'
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

Adding a PrimeVue Button component

Now that you're ready to play with PrimeVue components, add a <Button /> by doing the following:

Add import Button from 'primevue/button'; right after the opening <script> tag in your App.vue file.
Register the Button component by putting Button in the components object on your App.vue file's Vue instance.
And then add <Button /> to your App.vue component template inside the <div> with the id of app.

Once you have completed these 3 steps, your App.vue file should look like this.

    <template>
      <div id="app">
        // Step 3. Adding PrimeVue Button to template
        <Button />
      </div>
    </template>

    <script>
    // Step 1. Adding PrimeVue Button
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        // Step 2. Registering PrimeVue Button
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

Now head on over to http://localhost:8080/ and make fun of how wimpy your button looks!

So next you're going to learn how to use the PrimeVue Button's props and classes to change that.

Adding text to your PrimeVue Button

This is super straightforward.

Just add a label attribute to your PrimeVue Button and pass it a value like Primary.

    <template>
      <div id="app">
        // Adding Primary label to PrimeVue Button
        <Button label="Primary" />
      </div>
    </template>

    <script>
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

Now take a peek at http://localhost:8080/.

Your button says Primary and looks pretty good, but now let's add an icon!

Adding an icon to your PrimeVue Button

To add an icon to your <Button label="Primary" /> component, head on over to this PrimeIcons showcase page and locate an icon you would like to add.

Then add the icon attribute with the name of the icon you want while following PrimeIcons' pi pi-{icon name} naming convention.

So for instance, if you like the plus icon, you would add icon="pi pi-plus" to your <Button label="Primary" /> component like this.

    <template>
      <div id="app">
        // Adding the plus icon to your PrimeVue Button
        <Button label="Primary" icon="pi pi-plus" />
      </div>
    </template>

    <script>
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

Changing the PrimeVue Button's color

Now to change your <Button />'s color, clone your <Button label="Primary" icon="pi pi-plus" /> component and change the label to Success like so.

    <template>
      <div id="app">
        <Button label="Primary" icon="pi pi-plus" />
        // Adding 2nd PrimeVue Button labeled "Success"
        <Button label="Success" icon="pi pi-plus" />
      </div>
    </template>

    <script>
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

Now add the class p-button-success to your new <Button label="Success" icon="pi pi-plus" /> component...

    <template>
      <div id="app">
        <Button label="Primary" icon="pi pi-plus" />
        // Adding the class "p-button-success" to the 2nd PrimeVue Button labeled "Success"
        <Button label="Success" icon="pi pi-plus" class="p-button-success" />
      </div>
    </template>

    <script>
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

...and you will see a second green button in your browser labeled "Success".

Now for kicks, change your new <Button label="Success" icon="pi pi-plus" class="p-button-success" /> component's icon attribute to pi pi-check to change the icon to a check mark.

Changing your PrimeVue theme

To change your PrimeVue theme, all you have to do is change the 1st CSS import in your main.js file.

So give it a try!

Change your theme from the Nova Light theme to the Rhea theme by changing your 1st CSS import to import 'primevue/resources/themes/rhea/theme.css';.

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

    // Importing the Rhea 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.config.productionTip = false

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

Now head over to your browser and take a look at the fresh new style!

Super easy stuff.

Final thoughts

I highly recommend you invest the time, dive deeper into the PrimeVue Documentation, and keep playing with all of the components at your disposal.

Building a custom UI Component library that is beautiful, flexible, feature rich, and adheres to Section 508 Accessibility standards is very. very. hard.—especially for startups, tinkerers, and hobbyists.

And when it comes to larger companies and teams, there is a higher return on investment if time is spent on solving business problems that provide value to their customers, over building and maintaining all of the little puzzle pieces in between.

I'm definitely not saying that PrimeVue, Vuetify, Quasar, and other Vue UI Libraries are a magic bullet for every Vue team, but they absolutely have their place in the Vue ecosystem.

And in regards to PrimeVue, PrimeTek stated in their press release that their...

...goal is to make PrimeVue a well-known and valuable member of the Vue Ecosystem in 2020...

...and from what I have seen, it appears they have hit the ground running.

Top comments (10)

Rogério Luiz Aques de Amorim • Oct 8 '20 • Edited

Hey @heyshadowsmith , thanks for the article. I'm checking primevue with vue 3 and I've been trying to build something like a boilerplate for an app with navigation drawer, top bar with hamburguer icon to control the drawer state and the main div for vue-router and I thought that maybe you could have a template somewhere that helps me understand how to do it with primevue. I'm coming from vuetify and there we have an v-app style tags that helps to organize all the pieces and I haven't found yet something similar in primevuew

Taufan Ali Nuryanto • Nov 30 '20

You can have a free template by the PrimeVue author here:
primefaces.org/sigma-vue

Mark Blakeney • Jul 22 '21

This seems like a good article but note something must have changed because it does not work anymore. After adding the Button it just gives a blank screen. Nova-light doesn't seem to exist anymore so changed that to Nova but then you get a heap of warnings, e.g:

 WARNING  Compiled with 8 warnings                                                                                  
 warning  in ./node_modules/primevue/button/button.esm.js
"export 'createBlock' was not found in 'vue'
 warning  in ./node_modules/primevue/button/button.esm.js
"export 'createCommentVNode' was not found in 'vue'
 warning  in ./node_modules/primevue/button/button.esm.js
"export 'createVNode' was not found in 'vue'
 warning  in ./node_modules/primevue/button/button.esm.js
"export 'openBlock' was not found in 'vue'
 warning  in ./node_modules/primevue/button/button.esm.js
"export 'renderSlot' was not found in 'vue'
 warning  in ./node_modules/primevue/button/button.esm.js
"export 'resolveDirective' was not found in 'vue'
 warning  in ./node_modules/primevue/button/button.esm.js
"export 'toDisplayString' was not found in 'vue'
 warning  in ./node_modules/primevue/button/button.esm.js
"export 'withDirectives' was not found in 'vue'

Then the developer console gives the folllowing:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Object(...) is not a function"
found in
---> <Button>
       <App> at src/App.vue
         <Root>
vue.runtime.esm.js?2b0e:1897 TypeError: Object(...) is not a function
    at Proxy.render (button.esm.js?bb57: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)

Comment deleted

Shadow Smith • Jan 22 '20

Right!? The DataTable component blew my mind. You should take a peek at it if you haven't!

Mr.KD_1933 • Sep 3 '20

Does adding PrimeVue to your application good idea . Who is best when compare to bundle size (Vuetify or PrimeVue). My manager is not allowing me to do so by saying, it will have impact on initial load time of Application ...I mean to say does it really have. If I am going to import only some of the modules of it.
Anyway even If I did so, what will be bundle size & does it have it's tree shaking algorithm.
When to official (primefaces.org/primevue/showcase/#...) PrimeVue site nothing has be mentioned about all of this.
Please kindly clarify.
Thank you