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 (6)
Help me out with something...why do Prime, Material-UI, and others recreate the native HTML elements like button, primefaces.org/primevue/showcase/#...?
These abstractions have a cost, so what is the benefit of doing this?
Using a component gives you the benefit of styling without doing it yourself.
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
iconPoswhich are not standard in HTML but PrimeVue undestands them).
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
CustomButtonand 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.
Here is what the PrimeVue3 Button component does. It handles an icon, badge and loading attribute and all the classes that go with that.
Oh I understand the concept of a component, my question is why recreate native elements as components? There’s very little extra code involved to write or refactor the markup for these elements but a pretty high cost in the overhead and increased framework dependency as devs code against your custom API rather than directly with the native API
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
Buttonfrom a library where native HTML
buttonworks fine or you make your own
Buttoncomponent . And my answer was that you get functionality and styling bundled in the library's
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.