DEV Community

loading...
Cover image for Love Vuetify? Meet PrimeVue, a powerful new Vue UI Library.

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

heyshadowsmith profile image Shadow Smith ・6 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

cd primevue-playground && npm i primevue primeicons
Enter fullscreen mode Exit fullscreen mode

Open your project in your code editor.

code .
Enter fullscreen mode Exit fullscreen mode

Start your development server.

npm run serve
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Adding a PrimeVue Button component

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

  1. Add import Button from 'primevue/button'; right after the opening <script> tag in your App.vue file.
  2. Register the Button component by putting Button in the components object on your App.vue file's Vue instance.
  3. 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

...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')
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (9)

pic
Editor guide
Collapse
n0n3br profile image
Rogério Luiz Aques de Amorim • 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

Collapse
auphali profile image
Taufan Ali Nuryanto

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

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
heyshadowsmith profile image
Shadow Smith Author

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

Collapse
mrkdhellix1993 profile image
Mr.KD_1933

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

Collapse
codeguru_io profile image
codeguru.io

I would love to know your thoughts on Quasar Framework which I believe it has bit more vue components than Primevue

Collapse
zynth17 profile image
Christopher Reeve

what about adding our own theme? is it possible? how to do it? is there any way we can change the primary color variable and so on?

Collapse
ndy40 profile image
Ndy

Awesome to see they have a VueJS components library. I knew about them from back in my Java days.. cool stuff.

Collapse
heyshadowsmith profile image
Shadow Smith Author

Yeah, it appears that they have built some sort of library for everything. Feels good to know that they have an established track record.