How To Use PrimeVue With Vue3
Tags: vue, javascript, webdev, primevue
Published: 2022-10-19 22:58:41

by [Favour Vivian Woka](https://blog.openreplay.com/authors/favour-vivian-woka)




[Vuejs](https://vuejs.org/) is a well-known JavaScript framework. It is used to develop front-end web applications and native mobile apps. [Vuejs](https://vuejs.org/) is also known for its straightforward data binding and syntax.

[Vuejs](https://vuejs.org/) supports a variety of Ul components, including [BootstrapVue](https://bootstrap-vue.org/), [Bootstrap](https://getbootstrap.com/), [TailwindCss](https://tailwindcss.com/), [PrimeVue](https://www.primefaces.org/primevue/setup), and others. However, the focus of this article will be on how to use [PrimeVue](https://www.primefaces.org/primevue/setup) in a [Vue3](https://vuejs.org/) application.

## What is PrimeVue?

[PrimeVue](https://www.primefaces.org/primevue/setup) is a new open-source UI component in the Prime family. It is a UI framework for [Vue3](https://vuejs.org/) and it's a sibling of the popular [PrimedNG](https://www.primefaces.org/primeng) framework. It was developed by the [PrimeTek](https://www.primetek.com.tr/) Informatics company. It is a company with years of experience in creating open-source UI solutions such as [PrimeFaces](https://www.primefaces.org/), [PrimeNG](https://www.primefaces.org/primeng), [PrimeReact](https://www.primefaces.org/primereact), etc.

Why use it?

- It has excellent documentation.
- It has a large number of UI components.
- There are many predefined themes to choose from.
- It has first-class support for responsive design.
- It has support for Typescript with types and tooling help.
- It increases productivity by allowing you to do more in less time.

## Installation of PrimeVue

There are two ways in which you can add [PrimeVue](https://www.primefaces.org/primevue/setup) to your [Vuejs](https://vuejs.org/) project. You can either use the NPM method or the CDN method, but don't worry; I'll go over both approaches here.

### Step One: Install PrimeVue using the NPM method.

Add [PrimeVue](https://www.primefaces.org/primevue/setup) to your current [Vuejs](https://vuejs.org/) project by using the NPM command. Start your terminal and type the following command.

```
npm install primevue@^3.15.0 --save
npm install primeicons --save
```

### Step Two: Using the CDN method.

Copy the code below and paste it inside your `index.html` to add [PrimeVue](https://www.primefaces.org/primevue/setup) to your existing [Vuejs](https://vuejs.org/) project using the CDN function.

```
<!-- Inside the head -->
<link href="https://unpkg.com/primevue/resources/themes/lara-light-indigo/theme.css" rel="stylesheet">
<link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">

<!-- Inside the Body -->
<script src="https://unpkg.com/primevue/core/core.min.js"></script>
<script src="https://unpkg.com/primevue/slider/slider.min.js"></script>
```

## Setting up PrimeVue configuration

After you've added [PrimeVue](https://www.primefaces.org/primevue/setup) to your project using either of the methods described above. The next step is to configure [PrimeVue](https://www.primefaces.org/primevue/setup). 
 
Open your `main.ts` file and import [PrimeVue](https://www.primefaces.org/primevue/setup) from `primeVue/config` as seen below.
 
[Vue TypeScript](https://vuejs.org/guide/typescript/overview.html) is what I'm using.

```javascript
import { createApp } from "vue";
import App from "./App.vue";

import PrimeVue from 'primevue/config'; // here

import router from "./router";
import store from "./store";

createApp(App)
  .use(store)
  .use(router)
  .use(PrimeVue)
  .mount("#app");
```
## Importing PrimeVue CSS

Still, inside your `main.ts` file, you will import the code below.

```javascript
import "primevue/resources/themes/saga-blue/theme.css"; //theme
import "primevue/resources/primevue.min.css"; //core CSS
import "primeicons/primeicons.css"; //icons
```

The first importation in the above code is the saga-blue theme. The theme is the [PrimeVue](https://www.primefaces.org/primevue/setup) theme, but you may alter it to any of the [PrimeVue](https://www.primefaces.org/primevue/setup) themes you desire.
 
The second import is the [PrimeVue](https://www.primefaces.org/primevue/setup) CSS, and the last is the [PrimeIcon](https://www.primefaces.org/primevue/icons) if you want to use their icon library.

## Registering a global component

Now that you've configured [PrimeVue](https://www.primefaces.org/primevue/setup) in your [Vuejs](https://vuejs.org/) project. The next step is to register a global component. The goal is to ensure that our configuration and installation are working.
 
Import the PrimeVue dialog component as shown below in the main.ts file.

```javascript
import Dialog from "primevue/dialog";
```

The dialog must be registered as a global component after importing it, as shown below.

```javascript
createApp(App).use(store).use(router).use(PrimeVue).component("Dialog", Dialog).mount("#app");
```

The dialog can now be used in your project as a global component after being registered, as shown below.

```javascript
<template>
  <div class="About">

    <Dialog></Dialog>

  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "About",
});
</script>
```

## Registering a local component

You'll also want to look at registering a [PrimeVue](https://www.primefaces.org/primevue/setup) component as a local component.
 
Let's say you have a section in your code that requires a button with the text "Click To Get Started". 
 
You want to make the button a local component because it will be used once across the project.
 
You also don't want to stress creating a component for this button.
 
You'll want to use [PrimeVue buttons](https://www.primefaces.org/primevue/button) to achieve it.
 
To import the [PrimVue](https://www.primefaces.org/primevue/button) button into your file, follow these steps.

```javascript
<template>
  <div class="hore__secton"> </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

import Button from 'primevue/button';

export default defineComponent({
  name: "hero-section"
});
</script>
```

Once the import button is ready, you must add it to the [Vue](https://www.primefaces.org/primevue/button) component instance as a component. Otherwise, [Vue](https://www.primefaces.org/primevue/button) won't identify it as a component.

```javascript
<template>
  <div class="hore__secton"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Button from 'primevue/button';

export default defineComponent({
  name: "Home",
  components: {
    Button
  },
});
</script>
```

You can now use the button within your template, as shown below.

```javascript
<template>
  <div class="hore__secton">
    <Button label="Click To Get Started" icon="pi pi-check" iconPos="right"/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Button from 'primevue/button';

export default defineComponent({
  name: "Home",
  components: {
    Button
  },
});
</script>
```

[PrimeVue buttons](https://www.primefaces.org/primevue/button) are an extension of standard buttons. It has a lot of built-in properties, including: 

- **Label**: The text you want the buttons to have.
- **Icons**: The names of the icons you want to apply to the button.
- **IconPos**: The position where you want the icon on the button to be, e.g. ( "left," "right," "bottom," and "top.")
- **Badge**: The badge is a small status indicator for a button.

 
There are still more inbuilt properties that can be used, which I did not cover in this article. You can learn more about them in the documentation. 
 
You can test the configuration by serving your project to see if it's working.

![1](https://blog.openreplay.com/images/how-to-use-primevue-with-vue3/images/image01.png)


And then for the modal:

![2](https://blog.openreplay.com/images/how-to-use-primevue-with-vue3/images/image02.png)


You can confirm the installation is functioning by looking at the images above. 

The creation of components and configurations both work. Feel free to start over if you didn't come to the same conclusion. 

Pay close attention to spot any potential errors or omissions.



<h2>Open Source Session Replay</h2> 

_<a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a> is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data._

![OpenReplay](https://blog.openreplay.com/banner-blog_1oYPGT.png)

_Start enjoying your debugging experience - <a href="https://github.com/openreplay/openreplay" >start using OpenReplay for free</a>._



## Build A Profile Card

Creating a profile card helps us to utilize the [PrimeVue](https://www.primefaces.org/primevue/button) component and utility classes. 

It will also assist us in becoming more familiar with the documentation.

Create a folder called profile inside the views folder of your project. 

Inside the profile folder, create the `profile.html`, `profile.css`, and `profile.vue` files.

Your HTML code will be in `Profile.html`, your CSS code will be in `Profile.css`, and your TypeScript or JavaScript code will be in `profile.vue`.

```javascript
<template src="./profile.html"></template>
<style src="./profile.css" lang="css" scoped></style>
```

In the preceding code, I imported my `profile.css` and `profile.html` files inside the `profile.vue` file. 

Copy the code below and paste it inside your `profile.html` file.

```javascript
<div class="bg-gray-300 h-screen">
  <div class="flex flex-row w-full align-items-center h-screen w-10 m-auto">
    <div class="flex text-left font-bold w-4 h-30rem border-round-left">
      <img src="../../assets/profile.jpg" class="border-round-left" />
    </div>
    <div
      class="flex flex-row align-items-center border-round-right font-bold w-8 h-30rem px-4 bg-white"
    >
      <div class="w-full">
        <h3 class="m-0 p-0">Actor</h3>
        <h1 class="m-0 p-0">Robert Downey Jr.</h1>
        <div
          class="flex align-items-start justify-content-start w-full text-color-secondary"
        >
          <div class="flex flex-column text-justify font-bold w-6 pr-5">
            <small>ABOUT</small>
            <p>
              Robert Downey Jr. is an American actor known for roles in a wide
              variety of films
            </p>
            <span>"Iron Man"</span>
            <span>"The Avengers"</span>
            <span>"Sherlock Holmes"</span>
          </div>
          <div class="flex flex-column text-justify font-bold w-6">
            <small>QUOTES</small>
            <p>Sometimes you gotta run before you can walk</p>
            <span>- Sherlock Holmes</span>
          </div>
        </div>
        <div class="mt-5">
          <i class="pi pi-facebook mr-4 cursor-pointer"></i>
          <i class="pi pi-twitter mr-4 cursor-pointer"></i>
          <i class="pi pi-instagram mr-4 cursor-pointer"></i>
          <i class="pi pi-linkedin cursor-pointer"></i>
        </div>
      </div>
    </div>
  </div>
</div>
```

In the code above, I created a parent `div` and specified the screen height and background color for the `div` using inline style.
 
Next, inside the parent `div` is another `div` I gave flex. Flex is not a class I define myself; it is one of the [PrimeFlex](https://www.primefaces.org/primeflex/setup) utility classes.
 
To be able to use Flex in your [PrimeVue](https://www.primefaces.org/primevue/setup) application, you must install [PrimeFlex](https://www.primefaces.org/primeflex/setup).
 
[PrimeFlex](https://www.primefaces.org/primeflex/setup) is a CSS utility package for PrimeFace. This library has a lot of CSS utility classes, such as grid systems, flexboxes, spacing, elevation, and more. 
 
Although it is not required to install it, it is highly recommended to add it because you are likely to need it when developing applications.
 
[PrimeFlex](https://www.primefaces.org/primeflex/setup) is not limited to [PrimeVue;](https://www.primefaces.org/primevue/setup); it is a stand-alone library that is used within the Prime family. 
 
To install [PrimeFlex](https://www.primefaces.org/primeflex/setup), run the command below:

```javascript
npm install primeflex --save
```

Once the dependency has been installed, copy the following code and paste it into your `main.ts` file.

```javascript
import "/node_modules/primeflex/primeflex.css";
```

[PrimeFlex](https://www.primefaces.org/primeflex/setup) also supports the CDN approach. Copy the code below and put it into your HTML head tag.

```javascript
<link rel="stylesheet" href="https://unpkg.com/primeflex@3.1.2/primeflex.css">
```

After you might have added [PrimeFlex](https://www.primefaces.org/primeflex/setup) using any of the approaches, the next thing is to serve your application. 

Once you've served your app, you should see something like the image below.

![3](https://blog.openreplay.com/images/how-to-use-primevue-with-vue3/images/image03.png)

## Conclusion

If you are getting started with [Vue.js](https://vuejs.org/), [PrimeVue](https://www.primefaces.org/primevue/setup) is the best UI library for you. 

PrimeVue supports a variety of Vue application choices and options such as the browser source APIs, option APIs, and Vue composition APIs.

Please like and share this article if you find it useful.

> A TIP FROM THE EDITOR: Learning Vue3? Then don't miss our [Vue 3 - The Evolution Of Vue](https://blog.openreplay.com/vue-3-the-evolution-of-vue/) and [Learn The Fundamentals Of Vue With Vue 3](https://blog.openreplay.com/learn-the-fundamentals-of-vue-with-vue-3) articles, among many related to Vue!




[![newsletter](https://blog.openreplay.com/newsletter_Z1P0UIP.png)](https://newsletter.openreplay.com/)