DEV Community

Cover image for PrimeVue 3.0.0 released for Vue 3 with 60+ UI Components featuring Bootstrap, Material, Fluent UI and Custom Themes
Cagatay Civici
Cagatay Civici

Posted on

PrimeVue 3.0.0 released for Vue 3 with 60+ UI Components featuring Bootstrap, Material, Fluent UI and Custom Themes

#vue #javascript #webdev

PrimeTek is proud to introduce PrimeVue 3.0.0 final release with full support Vue 3, over 60 highly customizable and accessible UI Components, a design agnostic theming featuring Material, Bootstrap, FluentUI and PrimeOne Themes, a theme designer, PrimeFlex css utilities, modern set of icons via PrimeIcons, premium Vue-CLI templates and more.

Take a tour around the PrimeVue Live Showcase to take the library for a test run.

PrimeVue is a free library to use under MIT License and available at NPM.

Note for Vue 2 Users

For Vue 2 users, we'll still be maintaining and improving PrimeVue 2, if you are on V2, please view the PrimeVue 2 website instead.

Top comments (4)

Collapse
 
michaelcurrin profile image
Michael Currin • • Edited

Using a component gives you the benefit of styling without doing it yourself.

e.g.

HTML:

<button-styled label="Submit"></button-styled>
Enter fullscreen mode Exit fullscreen mode

Rendered DOM:

<button type="button" class="p-button p-component">...
Enter fullscreen mode Exit fullscreen mode

This means classes get added for you. And the library can rename or add classes (along with the theming CSS) and you don't have to find and replace the class all over your app.

Further, a component generates nested elements so you have to only worry about the top one and so write less code.

Maybe less useful for a simple button and more useful for more complex tags.

Here is an example of HTML that PrimeVue renders. A simple submit button and then one with a checkbox icon (using icon and iconPos which are not standard in HTML but PrimeVue undestands them).

Original:

    <div id="app">
        <button-styled label="Submit"></button-styled>

        <button-styled label="Submit" icon="pi pi-check" iconPos="right"></button-styled>
    </div>
Enter fullscreen mode Exit fullscreen mode

Rendered DOM:

    <div id="app">
        <button type="button" class="p-button p-component">
            <span class="p-button-label">Submit</span>
        </button>

        <button type="button" class="p-button p-component" iconpos="right">
            <span class="pi pi-check p-button-icon p-button-icon-left"></span>
            <span class="p-button-label">Submit</span>
        </button>
    </div>
Enter fullscreen mode Exit fullscreen mode

Screenshot

Collapse
 
michaelcurrin profile image
Michael Currin •

Plus you can use the Button component base and make your own CustomButton, which maybe adds another class or event. Then throughout your code base you use CustomButton and get the benefit of your own logic and the component (with its theme styling and DOM output).

A light and reusable component makes your code easier to read and also to change.

Thread Thread
 
michaelcurrin profile image
Michael Currin •

Here is what the PrimeVue3 Button component does. It handles an icon, badge and loading attribute and all the classes that go with that.

unpkg.com/browse/primevue@3.4.0/bu...

 
michaelcurrin profile image
Michael Currin • • Edited

Oh okay. I still don't understand the question then. Am I still missing something, maybe as I am new to PrimeVue.

I understood quesiton as why have Button from a library where native HTML button works fine or you make your own Button component . And my answer was that you get functionality and styling bundled in the library's Button.
You depend on an external source, so you have to write less of your own boilerplate in your project HTML. And have access to Button across your Vue projects that all use PrimeVue now, if they all use PrimeVue, so you don't have to write a Button component for every project. I mean maybe you'd write your own repo then which provided a Button across your repos but that is where an existing library saves you trouble.

Personally I am interested in using PrimeVue to give more styling for just few lines of code, but not locked into Material UI etc. and I have the ability to change to Bootstrap etc. by changing one CSS filename.

Read next

juniourrau profile image

🎄CSS Art: December Challange - Christmas In Malaysia ✨

Ravin Rau -

empiree profile image

10 Ways Developers Can Boost Productivity with ChatGPT

Oleg Dubovoi -

rijultp profile image

LiveAPI Devlogs Part 3: Transforming User Onboarding with 3 Industry-Inspired Methods

Rijul Rajesh -

yugjadvani profile image

Mastering Server-Side Rendering (SSR) in React 19 with Vite: The Ultimate Guide for Developers

Yug Jadvani -