Getting Started with PrimeVue

I’m playing around with Vue 3 and want to use a good UI component library. After some research, I found PrimeVue and am quite impressed by it:

• It has a massive number of UI components – arguably the most compared to other frameworks. It even has a full-blown text editor!
• The components are beautiful-looking and clean.
• There are a number of predefined themes to use and with potential tweaks – more on this later.
• Excellent documentation.
• MIT licensing.

While the documentation of Vue and PrimeVue are excellent, there were some extra steps needed to get things working and customised.

In this post, I’ll show how to get started with PrimeVue using the default out-of-box Vue CLI app, as well as make some customisation to the primary colour and fonts.

The high level steps are:

1. Create Vue CLI app.
2. Setup PrimeVue.
3. Customise primary colour and font.

Create Vue-CLI App

The example Vue app used in this post will be the out-of-box default Vue CLI app, which we will create now.

First, install the Vue CLI globally on the machine.

npm install -g @vue/cli

Then create the Vue CLI project inside a folder, where <my project> is your project name.

vue create <my project>

When creating the project, choose to manually select features and ensure the CSS pre-processors option is selected.

Next, the Vue CLI will prompt for which CSS pre-processor to use. I chose the Sass/SCSS option with Node-SCSS as that’s the one I am more familiar with.

The Vue CLI will proceed to setup the project, which might take a while for it to download all the dependencies. When it is all completed, navigate into your <project> folder first, then you can run the out-of-box default app by running the command

npm run serve

This will now run the Vue app. Go to the following URL on the browser to see the app.

http://localhost:8080

It should look something similar to the following:

If you see a web page similar to the above, it means you have run the Vue CLI app successfully.

Setup PrimeVue

Now we will setup the PrimeVue library. First, in the same project folder, run the following command to install PrimeVue:

npm install primevue@latest --save
npm install primeicons --save
npm install primeflex --save

The above will install the latest PrimeVue core library, as well as the icons and the layout utility called Prime Flex.

Next, we will add some PrimeVue buttons to the home page of the app. Make sure to run the command npm run serve so we can see the app running in browser.

Add PrimeVue UI Components

Use PrimeVue

Open up the Vue CLI project created previously. I will use Visual Studio Code here. We want to use the PrimeVue library. To do so, modify the main.js file similar to the following:

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import PrimeVue from 'primevue/config'; // This imports the PrimeVue library.

createApp(App).use(store).use(router).use(PrimeVue, { ripple: true }).mount('#app')

Your code might differ slightly, however the important thing here is we are telling the Vue app to start using PrimeVue. For fun, also add a configuration here to enable the ripple effect.

use(PrimeVue, { ripple: true })

Now we are ready to show some PrimeVue buttons on the page.

Add Buttons

Open up the the file HelloWorld.vue. We want to firstly import the PrimeVue buttons.

Change the script section from

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

To

<script>
import Button from "primevue/button"; // Import the PrimeVue buttons.
import "primeflex/primeflex.css"; // Import the PrimeVue layout utility library.

export default {
  name: "HelloWorld",
  components: {
    Button, // The PrimeVue button will be used in the HTML section.
  },
  props: {
    msg: String,
  },
};
</script>

Now let’s add a bunch of buttons by modifying the HelloWorld.vue file:

    ......
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>PrimeVue Buttons</h3>
    <!-- Start of PrimeVue buttons. -->
    <Button label="Primary" />
    <Button label="Secondary" class="p-button-secondary" />
    <Button label="Success" class="p-button-success" />
    <Button label="Info" class="p-button-info" />
    <Button label="Warning" class="p-button-warning" />
    <Button label="Warning" class="p-button-help" />
    <Button label="Danger" class="p-button-danger" />
    <!-- End of PrimeVue buttons. -->
    <h3>Installed CLI Plugins</h3>
    ......

As you can see from the screenshot above, 7 buttons are added towards the top of the HelloWorld.vue file.

Now let’s go to http://localhost:8080 and see what’s happening:

Hmm, the buttons are shown on the page, so why isn’t it displaying nicely?

The reason is we need to use a particular PrimeVue theme so it will know what kind of styling can be applied to the buttons.

Apply Theme

One thing that PrimeVue stands out is it comes with a good selection of predefined themes. In this example, we will use the Material Design Deep Purple light theme.

To add the theming styles, we will import the CSS files as below in the App.vue file by adding two import lines:

<style lang="scss">
@import "~primevue/resources/primevue.min.css";
@import "~primevue/resources/themes/md-light-deeppurple/theme.css";

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

If all goes well, you should see the PrimeVue buttons displaying correctly.

Layout Tidy Up

Let’s add some padding between the buttons. We could do this in our own CSS stylesheet, but PrimeVue also comes with the Primeflex utility library to help out. PrimeVue highly recommends that this library is used with other PrimeVue components. We have already previously imported the Primeflex library when adding the buttons.

Now, let’s add some margin between the buttons so the are spaced out nicely. This is done by adding left and right margins of size 1 to each of the buttons.

    ......
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>PrimeVue Buttons</h3>
    <!-- Start of PrimeVue buttons. -->
    <Button label="Primary" class="p-mr-1 p-ml-1" />
    <Button label="Secondary" class="p-button-secondary p-mr-1 p-ml-1" />
    <Button label="Success" class="p-button-success p-mr-1 p-ml-1" />
    <Button label="Info" class="p-button-info p-mr-1 p-ml-1" />
    <Button label="Warning" class="p-button-warning p-mr-1 p-ml-1" />
    <Button label="Warning" class="p-button-help p-mr-1 p-ml-1" />
    <Button label="Danger" class="p-button-danger p-mr-1 p-ml-1" />
    <!-- End of PrimeVue buttons. -->
    <h3>Installed CLI Plugins</h3>
    ......

The buttons should spaced out nicer now.

Customise Primary Colour and Font

Often, as a minimum, we want to change the primary colour and fonts to suit our brand. We could customise with the Theme Designer – which is recommended by PrimeVue – however this approach costs money. Fortunately, under the MIT license, we are free to customise the code to change the primary colour and fonts.

Change Primary Colour

Courtesy of this Stackoverflow answer, we can use some CSS to change the primary colour.

The idea is we will grab the theme’s (Material Design Deep Purple light in our case) CSS file to our project folder, rename it to CSS, and do a search-and-replace of the primary colour.

1. Copy the theme.css file from the folder below

<project folder>\node_modules\primevue\resources\themes\md-light-deeppurple\theme.css

To

<project folder>\src\assets\_theme.scss

Note the file extension is changed from CSS to SCSS.

Then replace all the primary colour values in the _theme.scss file with the CSS variable --primary-color. So replace

#673AB7

with

var(--primary-color)

We update the variable --primary-color to the actual value you want. In my case, I’ll use a blueish colour of #4670be

:root {
  ......
  --primary-color:#4670be;
  ......
}

Doing so means we only keep the primary colour RGB value in one place, i.e. with the CSS variable --primary-color This variable is then referenced everywhere else in the CSS file.

Now, also in the same _theme.scss file, comment out all the font-face CSS elements, since these fonts are meant to be loaded with relative paths, but they are no longer available in the src\assets folder. In addition, we will add our own fonts later on.

Then, we will need to use this themes.scss file in our app. In App.vue, remove the reference to the default theme CSS and use the new _theme.scss file instead:

<style lang="scss">
@import "~primevue/resources/primevue.min.css";
@import "./assets/_theme.scss";
// @import "~primevue/resources/themes/md-light-deeppurple/theme.css";

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

If all goes well, the new primary colour should now show on the button!

Change Fonts

Fonts are very important to the overall UI of a website or web app. Here, we’ll setup our own fonts.

Generally there are two options to use fonts: one is to import from a remote website such as Google Fonts, one is to host the fonts locally within the web app.

Use Remote Fonts

In App.vue, simply import the font from the remote URL and add it as the font-family to use. In the example below, I import the Lobster font from Google Fonts:

<style lang="scss">
@import "~primevue/resources/primevue.min.css";
@import "./assets/_theme.scss";
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
// @import "~primevue/resources/themes/md-light-deeppurple/theme.css";

#app {
  // font-family: Avenir, Helvetica, Arial, sans-serif;
  font-family: 'Lobster', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

The font has indeed drastically changed.

Use Local Fonts

If you need to use local fonts for whatever reason (e.g. using private fonts, remote fonts not accessible) requires a bit more setup. The way we setup here means the font is part of the theme, as opposed to the app.

The first step is to make sure the fonts are available inside the src/assets folder. I created a fonts folder with some Open Sans and Work Sans fonts, as shown below:

The next step is to make the fonts known to the theme file but declaring the font-face elements for them. Below is the code in _theme.scss file:

/** Work Sans **/
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400;
  src: url("./assets/fonts/WorkSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Work Sans";
  font-style: italic;
  font-weight: 400;
  src: url("./assets/fonts/WorkSans-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Work Sans";
  font-weight: 700;
  src: url("./assets/fonts/WorkSans-Bold.ttf") format("truetype");
}

/** Open Sans **/
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("./assets/fonts/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 700;
  src: url("./assets/fonts/OpenSans-Bold.ttf") format("truetype");
}

Then inside the same _theme.scss file, specify how you want to use the font. For example, I use Work Sans as the main text, and Open Sans for H1, H2… and so on.

* {
  box-sizing: border-box;
  font-family: "Work Sans", Helvetica, Arial, sans-serif;
}
h1 {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

Reload the page, and you should see the changes!

Source Code

The source code of this can be found here:

https://github.com/henry000dev/primevue-starter

Conclusion

Vue is one of the top 3 JavaScript libraries out there. PrimeVue is the perfect UI component library to be used with Vue. I hope this post can help noobs like myself to get started with both Vue and PrimeVue.