website·Indexed 35 days ago
https://v3.primevue.orgDocumentation for PrimeVue v3, a UI component library for Vue.js by PrimeTek. Includes guides on installation with Vite and Nuxt, global configuration, theming, accessibility (WCAG 2), and Unstyled Mode. Features a comprehensive set of components including Dialog, Sidebar, Button, InputText, Dropdown, and VirtualScroller, along with the Pass Through (pt) API for styling.
The Calendar component supports screen readers via several methods:
<label> with inputId prop.aria-labelledby or aria-label props.combobox role and manages aria-expanded and aria-controls for the popup.<!-- Using Label -->
<label for="date1">Date</label>
<Calendar inputId="date1" />
<!-- Using aria-labelledby -->
<span id="date2">Date</span>
<Calendar aria-labelledby="date2" />
<!-- Using aria-label -->
<Calendar aria-label="Date" />primevue/radiobutton module.import RadioButton from 'primevue/radiobutton';contextMenu property on the DataTable. Use v-model:contextMenuSelection to track the selected row and the @row-contextmenu event to trigger the menu opening logic.<ContextMenu ref="cm" :model="menuModel" />
<DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu @row-contextmenu="onRowContextMenu">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
</DataTable>app.component().<!-- 1. Include the component script -->
<script src="https://unpkg.com/primevue/calendar/calendar.min.js"></script>
<script>
const { createApp } = Vue;
const app = createApp({ /* ... */ });
// 2. Register the component
app.component('p-datepicker', primevue.calendar);
app.mount('#app');
</script>Button components inside a ButtonGroup component to group them together visually.<ButtonGroup>
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</ButtonGroup>