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

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.

Comments

[Michael Currin]

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

e.g.

HTML:

<button-styled label="Submit"></button-styled>

Rendered DOM:

<button type="button" class="p-button p-component">...

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>

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> 

[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.

[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...

[Michael Currin]

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.