DEV Community: Cagatay Civici

Build your own Vue UI library with Unstyled PrimeVue Core and Tailwind CSS

Cagatay Civici — Sun, 07 Jan 2024 19:22:34 +0000

Wrapping UI components to encapsulate customized behaviors is a common pattern when building your own UI library, especially in larger scale teams where a shared library is utilized amongst numerous applications. A major advantage of this approach is decoupling the dependency to a 3rd party library since the consuming applications depend on the shared library instead.

PrimeVue unstyled core and Tailwind CSS would be a perfect toolset if you require to build a custom UI library. The main idea is to create your UI component by wrapping a PrimeVue component, pass your props as fall through and configure the pass-through Tailwind preset locally instead of a global configuration.

Toggle Switch

Let's build our own ToggleSwitch component inspired by Material Design. For this, we'll be using the PrimeVue InputSwitch component.

Template

The template section consists of a wrapper flex container, a built-in label and the PrimeVue InputSwitch. Notice the use of v-bind="$attrs" as we'd like to apply any property passed to our own component to the underlying InputSwitch e.g. v-model and v-on events. Component here is responsible for the main functionality and accessibility while we focus on standardizing the design requirements.

<template>
    <div class="flex items-center gap-4">
        <label :for="$attrs.inputId">{{ label }}</label>
        <InputSwitch v-bind="$attrs" />
    </div>
</template>

Script
The script sets inheritAttrs as false otherwise the fall through properties are applied to the main div container element. The additional props such as label are included as the props of our own component.

<script setup>
    defineOptions({
        inheritAttrs: false
    });

    defineProps(['label']);
</script>

Preset
So far so good as all the wiring is in place, time to apply our custom material design inspired style implemented with Tailwind utilities. The style is applied with the pt property of the InputSwitch locally, since we are using a local preset disable the merging with the global preset with ptOptions. For this we'll be using the material-toggle preset from the PrimeVue Tailwind CSS Presets Gallery.

<template>
    <div class="flex items-center gap-4">
        <label :for="$attrs.inputId">{{ label }}</label>
        <InputSwitch v-bind="$attrs" :pt="preset" :ptOptions="{ mergeSections: false, mergeProps: false }" />
    </div>
</template>

The preset is a simple pt configuration based on the InputSwitch PassThrough API with some extensions, notice the use of attrs to add an accent mode which does not exist in the API of the PrimeVue InputSwitch. We're able to utilize arbitrary attributes to add functionality to the components we wrap without waiting for component library maintainer to add it for us. This is a great example of the PrimeVue philosophy, providing 3rd party UI library that is easy to tune and customize as if it were an in-house library.

<script setup>
defineOptions({
    inheritAttrs: false
});

defineProps(['label']);

const preset = {
    root: ({ props }) => ({
        class: [
            'inline-block relative',
            'w-10 h-4',
            {
                'opacity-40 select-none pointer-events-none cursor-default': props.disabled
            }
        ]
    }),
    slider: ({ props, state, attrs }) => ({
        class: [
            // Position
            'absolute top-0 left-0 right-0 bottom-0 before:transform',
            { 'before:translate-x-5': props.modelValue },
            { 'before:-translate-x-1': !props.modelValue },

            // Shape
            'rounded-2xl',

            // Before:
            'before:absolute before:top-1/2',
            'before:-mt-3',
            'before:h-6 before:w-6',
            'before:rounded-full',
            'before:duration-200',
            'before:flex before:justify-center before:items-center',
            'before:[text-shadow:0px_0px_WHITE] before:text-transparent',
            { 'before:ring-4': state.focused },
            {
                "before:bg-surface-500 before:dark:bg-surface-500 before:content-['➖']": !props.modelValue,
                "before:content-['✔️']": props.modelValue,
                'before:bg-violet-500 before:ring-violet-300': !attrs.type & props.modelValue,
                'before:bg-amber-500 before:ring-amber-300': attrs.type === 'accent' && props.modelValue
            },

            // Colors
            'border border-transparent',
            {
                'bg-surface-200 dark:bg-surface-400 before:ring-surface-200 dark:before:ring-surface-400': !props.modelValue,
                'bg-violet-300': !attrs.type & props.modelValue,
                'bg-amber-300': attrs.type === 'accent' && props.modelValue
            },

            // States
            {
                'hover:before:bg-surface-400 hover:dark:before:bg-surface-600': !props.modelValue,
                'hover:before:bg-violet-600': !attrs.type & props.modelValue,
                'hover:before:bg-amber-600': attrs.type === 'accent' && props.modelValue
            },

            // Transition
            'transition-colors duration-200',

            // Misc
            'cursor-pointer'
        ]
    })
};
</script>

Final Result
Let's wrap it up with an example usage. See the material-toggle demo for a working sample of the preset we used in this component.

<ToggleSwitch v-model="checked1" inputId="primary" label="Primary" />
<ToggleSwitch v-model="checked2" inputId="accent" label="Accent" type="accent" />

Deep dive into PrimeVue PassThrough Props

Cagatay Civici — Sat, 09 Sep 2023 15:24:54 +0000

One of the recent goals of Prime UI libraries is to be unopinionated and be as flexible as possible. Pass Through props is the key to achieve that as we can combine it with the Unstyled mode to remove the default styles to implement theming with a CSS library of your choice such as Tailwind. This integrates the flexibility of Tailwind and the convenience of PrimeVue UI components.

Basics

So what is Pass Through (pt)? It is a new exciting API of PrimeVue to access the internal DOM Structure of the components. Each component defines a well defined API for props and events already however PT takes it to the next level to be able to customize attributes of internal elements such as adding arbitrary attributes so you don't need to depend on the library maintainer to add those.

Each component has a special pt property to define an object with keys corresponding to the available DOM elements. Each value can either be a string, an object or a function that returns a string or an object to define the arbitrary properties to apply to the element such as styling, aria, data-* or custom attributes. If the value is a string or a function that returns a string, it is considered as a class definition by default and added to the class attribute of the element. Every component documentation has a dedicated section to document the available section names exposed via PT.

Most common usage of pt is styling and customization. The class and style properties support the exact syntax of the corresponding Vue bindings like arrays, objects and conditionals.

The default style of Lara theme is like this;

So let's customize it with PrimeFlex CSS, note that any similar CSS library like Tailwind can also be used. PrimeVue has a built-in Tailwind CSS theme but that needs a separate article.



<Panel header="Header" toggleable
    :pt="{
        header: (options) => ({
            id: 'myPanelHeader',
            style: {
                'user-select': 'none'
            },
            class: [
                'border-primary',
                {
                    'bg-primary': options.state.d_collapsed,
                    'bg-primary-reverse': !options.state.d_collapsed
                }
            ]
        }),
        content: { class: 'border-primary text-lg text-primary-700' },
        title: 'text-xl',                                     // OR { class: 'text-xl' }
        toggler: () => 'bg-primary hover:bg-primary-reverse'  // OR { class: 'bg-primary hover:bg-primary-reverse' }
    }">
    <p class="m-0">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</Panel>

The output would be;

Lifecycle

Lifecycle hooks of components are also exposed as pass through using the hooks property so that callback functions can be registered. Available callbacks are onBeforeCreate, onCreated, onBeforeUpdate, onUpdated, onBeforeMount, onMounted, onBeforeUnmount and onUnmounted. Refer to the Vue.js documentation for detailed information about lifecycle hooks.

Global

Defines the shared pass through properties per component type. For example, with the configuration below all panel headers have the bg-primary style class and the all autocomplete components have a fixed width. These settings can be overriden by a particular component as components pt property has higher precedence over global pt by default. This can be customized with the mergeSections and mergeProps settings of the ptOptions property of a component. The usePassThrough section later in this article covers how these two properties customize the merge of a global configuration of a component and a particular component with its own pt configuration.



import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);

app.use(PrimeVue, { 
    pt: {
        panel: {
            header: {
                class: 'bg-primary'
            }
        },
        autocomplete: {
            input: { 
                root: 'w-16rem' // OR { class: 'w-16rem' }
            }
        }
    } 
});

Custom CSS

The global property has a css option to define custom css that belongs to a global pt configuration. Common use case of this feature is defining global styles and animations related to the pass through props configuration.



import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);

app.use(PrimeVue, { 
    pt: {
        global: {
            css: `
                button {
                    padding: 2rem;
                }

                .p-ink {
                    display: block;
                    position: absolute;
                    background: rgba(255, 255, 255, 0.5);
                    border-radius: 100%;
                    transform: scale(0);
                    pointer-events: none;
                }

                .p-ink-active {
                    animation: ripple 0.4s linear;
                }

                @keyframes ripple {
                    100% {
                        opacity: 0;
                        transform: scale(2.5);
                    }
                }
            `
        }
    } 
});

usePassThrough

An existing pass through configuration is customized with the usePassThrough utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the behavior of merging. One of the example use cases is customizing existing unstyled themes like Tailwind.



import {createApp} from "vue";
import PrimeVue from "primevue/config";
import { usePassThrough } from "primevue/passthrough";
import Tailwind from "primevue/passthrough/tailwind";

const app = createApp(App);

const CustomTailwind = usePassThrough(
    Tailwind,
    {
        panel: {
            title: {
                class: ['leading-none font-light text-2xl']
            }
        }
    },
    {
        mergeSections: true,
        mergeProps: false
    }
);

app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });

The mergeSections defines whether the sections from the main configuration gets added and the mergeProps controls whether to override or merge the defined props. Defaults are true for mergeSections and false for mergeProps.



const CustomTailwind = usePassThrough(

    Tailwind,

    {

        panel: {

            header: 'my_panel_header'

        }

    },

    { mergeSections: true, mergeProps: false }

);

// Output: 

// panel.header.class => 'my_panel_header'

// panel.title.class => Tailwind.panel.title.class



const CustomTailwind = usePassThrough(

    Tailwind,

    {

        panel: {

            header: 'my_panel_header'

        }

    },

    { mergeSections: true, mergeProps: true }

);

// Output: 

// panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']

// panel.title.class => Tailwind.panel.title.class



const CustomTailwind = usePassThrough(

    Tailwind,

    {

        panel: {

            header: 'my_panel_header'

        }

    },

    { mergeSections: false, mergeProps: true }

);

// Output: 

// panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']

// panel.title.class => undefined



const CustomTailwind = usePassThrough(

    Tailwind,

    {

        panel: {

            header: 'my_panel_header'

        }

    },

    { mergeSections: false, mergeProps: false }

);

// Output: 

// panel.header.class => 'my_panel_header'

// panel.title.class => undefined

Wrap Up

Pass Through props opens up many possibilities like implementing design systems using the flexibility of Tailwind along with the convenience of the built-in PrimeVue UI components. This will be covered later this week with an exclusive blog entry. Stay tuned!

90+ Vue UI Components Styled with Tailwind CSS

Cagatay Civici — Wed, 30 Aug 2023 20:42:44 +0000

PrimeVue has recently announced the new Unstyled mode that removes the default styling and exposes the component internals via pass through props API. With the unstyled mode, components do the hard work by providing the feature set and accessibility out of the box but leaves out the styling to the user.

Although any CSS library like Bootstrap and Bulma can be used, Tailwind CSS integration is match made in heaven, there is even a built-in Tailwind theme available in PrimeVue.

Interested? Let's dive in!

Setup

This part assumes that Tailwind is already available in your application, if not visit the Tailwind CSS framework guides like Vite or Nuxt for the installation. The built-in default theme is basically a global pass through configuration that needs to be imported from primevue/passthrough/tailwind path and then defined during setup. Since the theme is exclusive to unstyled mode, the unstyled setting is required in addition.

import {createApp} from "vue";
import PrimeVue from "primevue/config";
import Tailwind from "primevue/passthrough/tailwind";

const app = createApp(App);

app.use(PrimeVue, { unstyled: true, pt: Tailwind });

Tailwind uses PurgeCSS internally to remove unused classes, since PrimeVue components are loaded from node_modules the content property at tailwind.config.js needs to be aware of PrimeVue, otherwise the classes utilized in the theme will be removed as well.

export default {
    ...
    content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
        "./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}"
    ],
    ...
}

Voilà 💚, you now have 90+ awesome Vue UI components styled with Tailwind that will work in harmony with the rest of your application.

Customization

The built-in theme provides a strong base that can be extended further for your requirements. For customization, the pass through values need to be overriden. The unstyled section of the theming documentation for each component demonstrates the theme with an editable example. For instance, the panel component has the following default configuration.

panel: {
    header: ({ props }) => ({
        class: [
            'flex items-center justify-between', // flex and alignments
            'border border-gray-300 bg-gray-100 text-gray-700 rounded-tl-lg rounded-tr-lg', // borders and colors
            'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80', // Dark mode
            { 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable } // condition
        ]
    }),
    title: {
        class: ['leading-none font-bold']
    },
    toggler: {
        class: [
            'inline-flex items-center justify-center overflow-hidden relative no-underline', // alignments
            'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out', // widths, borders, and transitions
            'hover:text-gray-900 hover:border-transparent hover:bg-gray-200 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // hover
            'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]' // focus
        ]
    },
    togglerIcon: {
        class: ['inline-block']
    },
    content: {
        class: [
            'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 last:rounded-br-lg last:rounded-bl-lg',
            'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
        ] // padding, borders, and colors
    }
},

Let's assume the title section should be lighter and bigger.

import {createApp} from "vue";
import PrimeVue from "primevue/config";
import { usePassThrough } from "primevue/passthrough";
import Tailwind from "primevue/passthrough/tailwind";

const app = createApp(App);

//Tailwind customization
const CustomTailwind = usePassThrough(
    Tailwind,
    {
        panel: {
            title: {
                class: ['leading-none font-light text-2xl']
            }
        }
    },
    {
        mergeSections: true,  // Used to merge with other PT sections. The default is true.
        mergeProps: false,    // Whether to use override or merge with existing configuration
    }
);

app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });

Example

Take a look at the CodeSandbox sample to see the Tailwind CSS + PrimeVue in action

codesandbox.io

PrimeFaces v13.0.0 Released

Cagatay Civici — Mon, 24 Jul 2023 12:23:06 +0000

PrimeFaces UI component library is back with a new major release featuring over 200 improvements.

JSF is alive?

Well yes, PrimeFaces has been initiated back in late 2008 and after all these years thanks to the great community contributions it is still a healthy open source project with constant updates. Considering the fast-paced nature of Javascript ecosystem, a 14 year old UI library with 1 million+ download per year is exceptional. For form driven back office apps, it is still a viable choice in a Jakarta EE environment.

Free Theming

v13 is special because we're introducing some new changes and open sourcing some of the paid add-ons like theming. Theme Designer was a paid add-on and with v13 it is now available as open source, view the new theming documentation for details and tutorials. We'll also come up with a new video tutorial.

The visual editor now permits downloading the created themes as well in case you don't want to go through the details of the theming API.

Material and Bootstrap themes are also open sourced and available at github.

Elite to LTS

PrimeFaces Elite will be replaced with LTS like PrimeNG has this means maintenance versions of the last major version will now be open source starting with 13.0.1. In the past, 13.0.1 was only available to paying users.

Special Thanks

A big shout out the community leaders of PrimeFaces, without their contributions it would be impossible to maintain the library. PrimeFaces is a fantastic example of a community driven project.

Changelog

Visit the changelog for the complete list of changes.

Roadmap

Compared to other Prime UI libraries like PrimeNG, PrimeReact and PrimeVue, PrimeFaces still uses an older theming API with ui-* prefix. We're planning to migrate to p-* prefix and move to CSS variables from SASS.

Unstyled PrimeVue Meets Bulma CSS

Cagatay Civici — Wed, 19 Jul 2023 09:44:31 +0000

The new unstyled mode of PrimeVue allows integration with various CSS libraries. In this post, we'll try to use Bulma utilities to style the PrimeVue components.

PrimeVue Setup

We'll be using Vite+Vue in our sample. PrimeVue needs to run in unstyled mode so that the default styles are not added. We don't want to override CSS, just work with a plain canvas.

At main.js, begin with configuring PrimeVue;

import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);

app.use(PrimeVue, { unstyled: true });

Install Bulma

Bulma can be used with cdn or npm. Since we use Vite, let's go with npm and import it in our project at main.js.

npm install bulma

import 'bulma/css/bulma.css';

PrimeVue Components

Time to add some PrimeVue magic to the mix by adding a couple of components so final main.js becomes;

import { createApp } from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
import Button from 'primevue/button';
import InputText from 'primevue/inputtext';
import Textarea from 'primevue/textarea';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import Panel from 'primevue/panel';

import '@/assets/main.css';
import 'bulma/css/bulma.css';

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

app.component('Button', Button);
app.component('InputText', InputText);
app.component('Textarea', Textarea);
app.component('DataTable', DataTable);
app.component('Column', Column);
app.component('Panel', Panel);

app.mount('#app');

Input Fields

A Primevue input is easy to style with Bulma by adding the input style class.

<InputText class="input" placeholder="Text input" />

Buttons

The button class with variations applies class property of a PrimeVue button.

<div class="buttons">
   <Button class="button is-info">Info</Button>
   <Button class="button is-success">Success</Button>
   <Button class="button is-warning">Warning</Button>
   <Button class="button is-danger">Danger</Button>
</div>

DataTable

For table, we'll need the mighty Pass Through props of PrimeVue to access the component internals to add any arbitrary props.

<DataTable :value="products"
        :pt="{
          table: 'table is-fullwidth stripes',
        }"
>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>

Panel

Just like the table, with pass through props, we can pass the Bulma panel utilities to the PrimeVue panel easily.

<Panel header="Header"
        :pt="{
          root: 'panel is-primary',
          header: 'panel-heading',
          content: 'panel-block',
        }"
 >
   <p>Content</p>
</Panel>

Demo

The complete source code is available to StackBlitz.

PrimeVue Unstyled Mode with Tailwind and Bootstrap Styling

Cagatay Civici — Wed, 12 Jul 2023 17:00:06 +0000

Hey, fellow developers!

I wanted to share some exciting news with you all today. After months of hard work, PrimeVue UI library has just released its brand new Unstyled Mode, and it's a game-changer! 🚀

For those unfamiliar with PrimeVue, it's a UI library that provides a rich set of UI components for Vue.js applications. It's been a valuable choice for developers looking to build sleek and modern user interfaces quickly. And now, with the Unstyled Mode, PrimeVue is taking customization to a whole new level.

So, what exactly is Unstyled Mode? Well, as the name suggests, it allows us to use PrimeVue components without any predefined styling. Instead, it gives us the flexibility to apply our own custom styles using popular CSS libraries like Tailwind, Bootstrap, and many others.

This is a game-changer for several reasons. First and foremost, it opens up a world of possibilities in terms of design. No longer are we limited to the default PrimeVue styles. We can now leverage the power of CSS libraries like Tailwind and Bootstrap to create stunning interfaces that match our project's aesthetic requirements.

Imagine being able to use Tailwind's utility classes to style PrimeVue components effortlessly. Need a button? Apply Tailwind's button classes directly to the PrimeVue button component. Want a responsive grid system? Combine the power of Bootstrap's grid classes with PrimeVue's layout components. The possibilities are endless! In fact, our team is working on a built-in Tailwind theme to get you started quickly.

Visit the Tailwind Demo and Bootstrap Demo for details and code samples. Both examples use a button and a modal dialog styled with different approaches.

Moreover, this Unstyled Mode promotes reusability and consistency across projects. By separating the component logic from the styling, we can easily reuse the same PrimeVue component with different styles across various projects. This not only saves development time but also ensures a consistent user experience.

Unstyled mode can be enabled globally or for a particular component, visit the official documentation to get started.

So, whether you're a fan of Tailwind, Bootstrap, or any other CSS library, the new Unstyled Mode in PrimeVue opens up a world of possibilities. It gives you the freedom to create beautiful and customized user interfaces effortlessly while letting PrimeVue taking care of advanced UI requirements and accessibility.

I can't wait to see what amazing designs and applications you all come up with using PrimeVue's Unstyled Mode. Share your thoughts, experiences, and any cool examples you've created in the PrimeLand Discord Server!

To sum it up with a short overview of our Roadmap. Next piece is providing the built-in Tailwind theme to be the first Unstyled Mode theme. Then we'll begin updating the styled mode to merge the primevue-sass-theme to core and migrate to CSS variables for a dynamic approach. Then we'll continue with RTL support and the new UI based theme designer to provide an app to create themes easily whether in styled mode or unstyled mode.

Happy coding! 💻🎨

PrimeVue 3.2.0-rc1 with Vite Support

Cagatay Civici — Wed, 20 Jan 2021 12:06:20 +0000

PrimeVue 3.2.0-rc.1 is released with first class support for Vite, the new build tool from the create of Vue, Evan You. See the Vite-PrimeVue starter app for an example.

New Build

Up until now, PrimeVue can only be used with environments that support single file components, with 3.2.0-rc.1 the npm distribution contains native ES modules, IIFE format and CommonJS fallback so that it can be used with Vue CLI, Vite, a custom build with vue-loader enabled and directly within the browser with script tags.

Changelog

The highlight of this release is compatibility with the rest of the Vue ecosystem however we've managed to add numerous quality improvements reported by the users. View the changelog for details.

Live Demos

Visit PrimeVue documentation to get started now or take a look around the showcase.

Roadmap

Now the new build is out of the way we'll start adding the following features for 3.3.0;

Advanced Filtering like in PrimeNG.
Standalone VirtualScroller component as in PrimeNG.
New VirtualScroller for table and select components like PrimeNG has.
Grouping option for Select components.

Always bet on Prime!

PrimeVue 3.1.0 Brings 12 New UI Components For Vue 3

Cagatay Civici — Thu, 10 Dec 2020 13:57:10 +0000

Your new favorite UI component library for Vue is updated to bring 12 new components, Localization API and Confirmation API along with numerous improvements.

12 New Components
PrimeVue 3.1.0 is a major release that brings handy new components.

Confirmation API
Confirmation API makes it trivial to implement the repetitive confirmation tasks, the UI consists of ConfirmDialog and ConfirmPopup whereas the API is used via a ConfirmationService with full support for Options API and Composition API.

Locale API
It is cumbersome to manipulate the translations and localization options on each page so Locale API is created to solve this by offering a reactive global configuration to localize PrimeVue components with ease.

Changelog
Visit Changelog for more information about the improvements.

Vue 2 Users
If you are on Vue 2, no worries because PrimeVue 2.x is actively maintained, version 2.3.0 will bring these new enhancements to Vue 2.

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

Roadmap
Upcoming enhancements will make PrimeVue even better;

Advanced Data Filtering (e.g. PrimeNG)
Standalone VirtualScroller (e.g. PrimeNG)
New VirtualScroller for DataTable (e.g. PrimeNG)
VirtualScroller for Select components (e.g. PrimeNG)

Always bet on Prime!

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

Cagatay Civici — Tue, 13 Oct 2020 19:58:19 +0000

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.

PrimeVue 3.0.0-rc.1 brings 60+ UI Components with Excellent Support for Vue 3

Cagatay Civici — Mon, 28 Sep 2020 12:13:54 +0000

Ready to get started with Vue 3 and looking for a UI component suite? If so we have good news!

PrimeVue 3.0.0-rc.1 is released with excellent support and compatibility for Vue 3. PrimeVue provides 60+ rich set of open source UI components for Vue 3 with stunning bootstrap, material and custom themes along with PrimeFlex css utilities, dashboards, icons, visual theme designer and more.

PrimeVue 2.0.0 is released with 60+ Open Source UI Components featuring Bootstrap, Material Design and Custom Themes

Cagatay Civici — Mon, 06 Jul 2020 10:38:50 +0000

PrimeTek is thrilled to announce the 2.0.0 release of PrimeVue featuring 60+ UI components, a design agnostic theming api with Bootstrap, Material and custom themes, the new PrimeFlex CSS utility, modern icons via PrimeIcons v4, all-new demos and showcase. We believe PrimeVue is the most advanced and complete UI solution at the moment for Vue.js.

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.

PrimeVue UI Suite 1.0.0 released with 50+ Components featuring Material, Bootstrap and Custom Themes

Cagatay Civici — Mon, 13 Jan 2020 12:02:01 +0000

PrimeTek is proud to announce that, after months of hard work and dedication, PrimeVue has reached 1.0.0-final. PrimeVue is the most complete UI Component suite for Vue featuring over 50 components, theme designer, various VueCLI templates and professional support.

The Most Complete UI Component Suite
PrimeVue offers 50+ components as a solution for your UI requirements, whether they are simple or complex. From form components to charts, let PrimeVue do its magic while you focus on the business logic. Theme Designer Theme Designer is a Vue application to easily skin PrimeVue components to make sure they work within harmony within your own application. Nova, Luna and Rhea themes are included as free themes to get started in no time.

Premium Templates
Premium VueCLI templates are offered as a complete solution for your UI featuring an application layout, template pages on top of special themes such as Material, Bootstrap or Custom themes. Initially, following templates are available;

PRO Support
With PrimeVue PRO, it is easy to support, tune and add features to PrimeVue as if it were an in-house framework. PrimeVue PRO is a term based commercial support service. With the exclusive services of Pro account, you no longer need to post your questions in the community forum and your issues to community issue tracker.

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

Roadmap
Our goal is to make PrimeVue a well-known and valuable member of the Vue Ecosystem in 2020 and improve it every day based on the community feedback. Always bet on Prime!