Crafting Stunning UIs with Prime Vue

Building UIs can be a pain, or it can feel like a fun game. It all depends on how you approach it. Do you enjoy the process? Are you struggling to build everything from scratch, or do you have an epic toolbox at your disposal? Tools and frameworks make a huge difference, and when it comes to Vue.js, one of the best UI libraries out there is PrimeVue. It takes the complexity out of crafting stunning UIs and turns it into a smooth, enjoyable process.

Whether you’re working on a sleek dashboard, a complex enterprise app, or a simple form, PrimeVue offers a massive set of fully customizable, production-ready components that can save you time and elevate your design. In this ultimate guide, we’ll dive deep into what PrimeVue has to offer, from setup to advanced usage with Vue.js and Nuxt.js.

What is PrimeVue

PrimeVue is a UI component library built specifically for Vue.js. Offering more than 80 components, PrimeVue covers all aspects of frontend development—forms, data presentation, navigation, and more. Each component is highly customizable, allowing developers to meet complex UI requirements with minimal effort. What sets PrimeVue apart is its rich set of features combined with a minimal footprint, making it ideal for Vue.js and Nuxt.js applications focused on both aesthetics and performance.

PrimeVue’s real strength lies in its flexibility. Whether you’re building a simple static website or a large-scale web application, PrimeVue gives you the tools to create professional-grade UIs with ease.

While PrimeVue offers a rich set of components, developers may also explore other UI libraries like Vuetify and Daisy UI for their unique features and design paradigms.

Why Use PrimeVue for UI Development?

PrimeVue is rapidly gaining popularity among developers aiming to accelerate their development workflows. But with so many UI component libraries available, why should developers choose PrimeVue? The answer lies in its rich feature set and the following benefits:

• Comprehensive Component Library: From form inputs and buttons to complex data tables and charts, PrimeVue covers all aspects of UI development.
• Ease of Customization: Components are highly customizable and come with various props, events, and slots to tweak their behavior.
• Figma UI Kit: PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles and interactive components.
• Responsive Design: PrimeVue components are mobile-ready and fully responsive, out of the box.
• Extensible and Modular: You can include only the components you need, making it highly efficient for performance-sensitive applications.
• Beautiful and Customizable Icons: PrimeIcons is the default icon library for PrimeVue, offering over 250 open-source icons. It's optional, as PrimeVue components can use any icons with templating.
• Community and Documentation: PrimeVue boasts a thriving community and detailed documentation, making it easy to get started and troubleshoot any issues.

These features make PrimeVue a powerful choice for any Vue.js or Nuxt.js project, regardless of scale or complexity.

If you’re considering other libraries for your Vue.js project, you might find that solutions like Shadcn Vue offer specific advantages for building modern interfaces. For a deeper dive into these benefits, check out this Shadcn Vue article.

Getting Started With PrimeVue

PrimeVue works great with both Vue.js 3 and Nuxt 3 apps. In this section, we will walk you through installing and activating PrimeVue in both apps.

Installation with Vue 3 & Vite

Let’s say you used npm create vue@latest to scaffold a new Vue 3 App using Vite. If you want to add PrimeVue to your project, you should start by grabbing PrimeVue from npm:

npm install primevue

Then, we simply use PrimeVue as a plugin with Vue, and we can do that inside /src/main.ts:

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config'

const app = createApp(App)

app.use(PrimeVue, {
  // Options..
})

app.mount('#app')

Now we can start using PrimeVue components in our Vue app:

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

<template>
  <div>
    <Button>Click Me</Button>
  </div>
</template>

Installation with Nuxt 3

Nuxt.js simplifies the process of building server-side rendered and static sites using Vue.js. Integrating PrimeVue with Nuxt adds another layer of flexibility and performance. If you don’t already have a Nuxt 3 app, use the following command to create one:

npx nuxi@latest init primevue-nuxt-app

Next, we need to install PrimeVue and also the PrimeVue Nuxt module.

npm install primevue
npm install --save-dev @primevue/nuxt-module

In nuxt.config file, add the @primevue/nuxt-module to the modules section and define primevue object for the configuration of the module.

export default defineNuxtConfig({
    modules: [
        '@primevue/nuxt-module'
    ],
    primevue: {
        /* Configuration */
    }
})

Style Modes and Themes

One of the standout features of PrimeVue is its flexibility in how you can style components, thanks to its two main styling modes: Styled and Unstyled. This allows developers to either hit the ground running with pre-designed themes or take full control by custom styling every aspect of the UI.

Styled Mode

In Styled Mode, PrimeVue components come with predefined skins, making it easier to get started with polished UI elements without having to worry about custom CSS. The default theme is Aura, which features a modern look and feel with emerald as the primary color.

Styled mode is ideal for projects where you need a fully-functional and visually appealing UI with minimal setup. You can focus on building your application rather than spending time designing each component from scratch.

Styled components require installing the @primevue/themes package, as themes aren’t bundled by default with PrimeVue.

npm install @primevue/themes

Once installed, you can configure PrimeVue to use a specific theme, like Aura, by passing it to the plugin configuration.

import { createApp } from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'

const app = createApp(App)

app.use(PrimeVue, {
  theme: {
    preset: Aura
  }
})

app.mount('#app')

This setup automatically applies the Aura theme to all PrimeVue components across your app, giving you a ready-made, cohesive design system.

PrimeVue also offers a wide variety of other themes, which can be easily swapped based on the requirements of your project. For example, if you’re working on a dark-themed app or prefer a more minimalist look, you can enable dark mode by configuring the darkModeSelector.

app.use(PrimeVue, {
  theme: {
    preset: Aura,
    options: {
      darkModeSelector: '.my-app-dark'
    }
  }
})

In this configuration, PrimeVue will toggle its theme based on the presence of the .my-app-dark class, giving you control over how dark mode is applied in your app.

Unstyled Mode

For developers who prefer complete control over the design, Unstyled Mode is an excellent option. In this mode, PrimeVue components don’t come with any CSS by default, allowing you to style them from the ground up. This mode is particularly useful if you’re building a custom UI library on top of PrimeVue or if you need to adhere to specific design systems.

To activate unstyled mode, pass the unstyled: true option when setting up PrimeVue:

const app = createApp(App);
app.use(PrimeVue, {
    unstyled: true
});
app.mount('#app');

In this setup, all PrimeVue components will be rendered without any default styles, leaving it up to you to design and apply your custom styles.

PrimeIcons: Flexible Icon Integration with PrimeVue

PrimeIcons is the official icon library for PrimeVue, featuring over 250 open-source icons. It provides a wide range of icons designed to integrate seamlessly with PrimeVue components. While PrimeIcons is optional (since you can use any custom icon set), its flexibility and ease of use make it a convenient choice for most Vue.js projects.

Downloading PrimeIcons

To get started, install the PrimeIcons package via npm:

npm install primeicons

This will add the PrimeIcons library to your project, making it readily available for use in your components.

Importing PrimeIcons

After installation, you’ll need to import the PrimeIcons CSS file to your application. This can be done in your global stylesheet, typically in styles.scss or main.js depending on your setup:

import 'primeicons/primeicons.css';

This ensures that all icons are accessible and properly styled across your application.

Basic Syntax

PrimeIcons follows a simple and intuitive syntax. Each icon is represented by the pi class, followed by the specific icon name. The structure is pi pi-{icon-name}.

Here are some examples:

<i class="pi pi-check"></i>    <!-- Checkmark icon -->
<i class="pi pi-times"></i>    <!-- Close (X) icon -->
<span class="pi pi-search"></span>   <!-- Search icon -->
<span class="pi pi-user"></span>     <!-- User icon -->

Result:

You can use either the <i> or <span> element to display icons, depending on your needs. This flexibility allows you to embed icons within various HTML elements without additional complexity.

Using PrimeIcons in PrimeVue Components

PrimeVue components also support PrimeIcons directly through templating. For example, when creating a button with an icon, you can pass the relevant icon class to the icon property of the Button component.

<Button icon="pi pi-search" label="Search" />

This will render a button with a magnifier glass icon inside, giving your UI a polished, interactive feel.

Customizing and Extending PrimeIcons

If you need to customize the icons, you can apply your own styles through CSS. For instance, you can change the size, color, or add animations using standard CSS techniques:

.pi {
    font-size: 24px;
    color: #007bff;
}

.pi.pi-spin {
    animation: spin 2s infinite linear;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

This ability to tweak the icons makes PrimeIcons not only versatile but also fully customizable for your application's branding or design system.

Customizing PrimeVue Components with Props

PrimeVue gives us the ability to customize components through various props, allowing us to tailor them to fit the specific needs of our application. A great example of this is the ToggleButton, which provides an intuitive way to select a boolean value.

Basic Usage

The ToggleButton can be easily integrated into your Vue application with two-way binding using the standard v-model directive. This allows you to bind it to a boolean property, making it straightforward to track its state.

<script setup>
import { ref } from 'vue'
import ToggleButton from 'primevue/togglebutton'

const isChecked = ref(false)
</script>

<template>
  <div>
    <ToggleButton v-model="isChecked" onLabel="On" offLabel="Off" />
  </div>
</template>

In this basic setup, the button displays "On" when the value is true and "Off" when it's false.

Customized Options

Beyond the basic usage, the ToggleButton can be extensively customized. You can modify the labels and icons that represent the button’s states using the onLabel, offLabel, onIcon, and offIcon properties. This not only enhances the user experience but also aligns the component's appearance with your application's design language.

Here’s how you can implement a customized ToggleButton:

<script setup>
import { ref } from 'vue'
import ToggleButton from 'primevue/togglebutton'

const isChecked = ref(false)
</script>

<template>
  <div>
    <ToggleButton
      v-model="isChecked"
      onLabel="Locked"
      offLabel="Unlocked"
      onIcon="pi pi-lock"
      offIcon="pi pi-lock-open"
      aria-label="Do you confirm"
    />
  </div>
</template>

With that in place, this is how the ToggleButton will look now:

PrimeVue and TailwindCSS

Tailwind CSS is a utility-first CSS framework that allows for flexible and customizable UI development. Unlike traditional frameworks that come with opinionated styles, Tailwind provides low-level utility classes, such as bg-blue-500 and rounded, enabling you to create your own UI elements with ease. All PrimeVue UI components can easily integrate with TailwindCSS.

PrimeVue Unstyled Mode and TailwindCSS

PrimeVue's unstyled mode allows you to disable default styling elements, giving you full control over component styling. This is particularly useful for developers looking to build a custom design system using Tailwind CSS. In unstyled mode, you can define presets that inject Tailwind classes into PrimeVue components, providing a streamlined approach to styling without the default theme.

Getting Started with TailwindCSS in PrimeVue

The official tailwindcss-primeui plugin facilitates first-class integration between PrimeVue and Tailwind CSS, supporting both styled and unstyled modes. In styled mode, semantic colors from PrimeVue are available as Tailwind utilities (e.g., bg-primary, text-surface-500).

To get started, install the plugin via npm:

npm install tailwindcss-primeui

Next, configure it in your Tailwind configuration file:

// tailwind.config.js
module.exports = {
        // ..
    plugins: [require('tailwindcss-primeui')]
};

Extensions and Customization

The plugin extends Tailwind’s default configuration with additional utilities, maintaining support for all variants and breakpoints. This includes a comprehensive color palette for primary and surface colors, ensuring your components remain visually consistent.

In styled mode, you may encounter CSS specificity issues where Tailwind utilities do not override PrimeVue styles. There are two main solutions:

The Important Modifier

Use the ! prefix to enforce styling.

<InputText placeholder="Overridden" class="!p-8" />

CSS Layering

Configure the PrimeVue CSS layer to allow Tailwind styles higher specificity, removing the need for the ! prefix.

import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';

const app = createApp(App);
app.use(PrimeVue, {
    theme: {
        preset: Aura,
        options: {
            cssLayer: {
                name: 'primevue',
                order: 'tailwind-base, primevue, tailwind-utilities'
            }
        }
    }
});

@layer tailwind-base, primevue, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

Explore the tailwind section in PrimeVue official documentation for more.

Conclusion

As we've explored, PrimeVue stands out as an exceptional framework for building stunning user interfaces in Vue.js applications. Its extensive collection of components, flexibility, and ease of integration make it a powerful choice for developers aiming to create responsive and visually appealing UIs.

However, the world of UI libraries is vast, and there’s always more to discover. If you’re interested in broadening your skill set and diving deeper into custom solutions, I encourage you to check out the article on crafting a custom component library with Vue and Daisy UI. This resource will equip you with the knowledge to create tailored components that perfectly fit your project requirements.

By leveraging the strengths of various libraries and frameworks, you can enhance your development toolkit and deliver even more impressive user experiences.