Byline:

The Most Complete Vue UI Component Library

Powerful yet simple to use, versatile, performant Vue UI Component Library to help you build stunning user interfaces.

Key links

PrimeVue is a comprehensive UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, premium VueCLI templates and professional support. All widgets are open source and free to use under MIT License.

PrimeVue is a design-agnostic library and the theming system is based on the Theme Designer, the official tool to create themes for the components.

PrimeVue provides components you can use in a Vue app, whether directly or inside your own components. Such as form inputs or a navbar.

Integrates with Bootstrap, Material UI, etc. so you can switch between those without being locked in.

PrimeVue is also lower-level than a framework like Nuxt or VuePress - this provides components for other tools rather than being a standalone site generator.

Quickstarts

  • Follow the Quickstart guide on the PrimeVue docs to add PrimeVue to a Vue app.
  • See my PrimeVue Frontend Quickstart project, which showcases how to set up and host a static site built on Vue and PrimeVue, without using Node or a build step. This is a template project which you can easily copy to your own repos.
  • See my PrimeVue Quickstart project, which is made with Node.

Tips

On use components from PrimeVue. This applies when loading directly in the frontend but maybe not when using a build step with Node.

  • The “Button” doesn’t work as component name because it gets downcased in the DOM and “button” already exists. So use “PButton” as component and in template field.
  • If using in the HTML page directly, it gets downcased and then “p-button” is necessary.

Themes

See the Theming guide.

See the Free Themes section of the Quickstart guide for a list.

e.g.

primevue/resources/themes/bootstrap4-light-blue/theme.css
primevue/resources/themes/bootstrap4-light-purple/theme.css
primevue/resources/themes/bootstrap4-dark-blue/theme.css

You can try out themes live on the PrimeVue website, using Themes menu item.

For CSS files for theme names, see themes directory on the UNPKG CDN.