PrimeVue

UI component library usage.

Setup

PrimeVue 4 with the Aura theme is configured in main.ts:

import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'
import ToastService from 'primevue/toastservice'
import ConfirmationService from 'primevue/confirmationservice'

app.use(PrimeVue, {
  theme: {
    preset: Aura
  }
})
app.use(ToastService)
app.use(ConfirmationService)

Common Components

DataTable

<template>
  <DataTable
    :value="students"
    :loading="loading"
    paginator
    :rows="20"
    :rowsPerPageOptions="[10, 20, 50]"
    sortField="student_number"
    :sortOrder="1"
  >
    <Column field="student_number" header="ID" sortable />
    <Column field="full_name" header="Name" sortable />
    <Column field="status_display" header="Status">
      <template #body="{ data }">
        <Tag :value="data.status_display" />
      </template>
    </Column>
    <Column header="Actions">
      <template #body="{ data }">
        <Button icon="pi pi-eye" @click="viewStudent(data)" />
      </template>
    </Column>
  </DataTable>
</template>

Form Inputs

<template>
  <div class="field">
    <label for="name">Name</label>
    <InputText id="name" v-model="form.name" />
  </div>

  <div class="field">
    <label for="department">Department</label>
    <Select
      id="department"
      v-model="form.department_id"
      :options="departments"
      optionLabel="name"
      optionValue="department_id"
      placeholder="Select..."
    />
  </div>

  <div class="field">
    <label for="date">Date</label>
    <DatePicker id="date" v-model="form.date" />
  </div>
</template>

Dialogs

<template>
  <Dialog
    v-model:visible="showDialog"
    header="Edit Student"
    :modal="true"
    :style="{ width: '500px' }"
  >
    <div class="field">
      <label>Name</label>
      <InputText v-model="student.name" />
    </div>

    <template #footer>
      <Button label="Cancel" @click="showDialog = false" />
      <Button label="Save" @click="save" />
    </template>
  </Dialog>
</template>

Toast Messages

<script setup>
import { useToast } from 'primevue/usetoast'

const toast = useToast()

function showSuccess() {
  toast.add({
    severity: 'success',
    summary: 'Success',
    detail: 'Operation completed',
    life: 3000
  })
}
</script>

Confirm Dialog

<script setup>
import { useConfirm } from 'primevue/useconfirm'

const confirm = useConfirm()

function confirmDelete() {
  confirm.require({
    message: 'Are you sure?',
    header: 'Confirm Delete',
    icon: 'pi pi-exclamation-triangle',
    accept: () => deleteItem(),
    reject: () => {}
  })
}
</script>

<template>
  <ConfirmDialog />
  <Button label="Delete" @click="confirmDelete" />
</template>

Layout Components

Card

<Card>
  <template #title>Title</template>
  <template #content>
    <p>Content here</p>
  </template>
</Card>

Tabs

<Tabs>
  <TabList>
    <Tab value="0">Details</Tab>
    <Tab value="1">History</Tab>
  </TabList>
  <TabPanels>
    <TabPanel value="0">Details content</TabPanel>
    <TabPanel value="1">History content</TabPanel>
  </TabPanels>
</Tabs>

Icons

Use PrimeIcons:

<Button icon="pi pi-plus" label="Add" />
<i class="pi pi-check"></i>

Common icons: pi-plus, pi-pencil, pi-trash, pi-eye, pi-check, pi-times, pi-search