Category: PrimeVue

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Table Pagination

We can add table pagination easily into our Vue 3 app with PrimeVue.

For instance, we can write:

<template>
  <div>
    <DataTable
      :value="cars"
      class="p-datatable-striped"
      paginator
      :rows="10"
      paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
      :rowsPerPageOptions="[10, 20, 50]"
      currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
    >
      <Column field="vin" header="Vin"> </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
      <template #paginatorLeft>
        <Button type="button" icon="pi pi-refresh" class="p-button-text" />
      </template>
      <template #paginatorRight>
        <Button type="button" icon="pi pi-cloud" class="p-button-text" />
      </template>
    </DataTable>
  </div>
</template>

<script>
const seed = [
  { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
  { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
  { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
];

let cars = [...seed];
for (let i = 1; i <= 100; i++) {
  cars.push(...seed);
}
export default {
  name: "App",
  data() {
    return {
      cars,
    };
  },
  methods: {},
};
</script>

We add the paginator prop to enable pagination.

rows has the rows per page.

paginatorTemplate lets us specify the layout of the pagination bar with a string.

rowsPerPageOptions has the rows per page options for pagination.

currentPageReportTemplate has the string template to display the page info to the user.

We populate the paginatorLeft and paginatorRight slots to add the buttons for navigating the pages.

Table Sorting

We can make table columns sortable with the sortable prop on each column.

For instance, we can write:

<template>
  <div>
    <DataTable :value="cars" sortMode="multiple">
      <Column field="vin" header="Vin" sortable="true"> </Column>
      <Column field="year" header="Year" sortable="true"></Column>
      <Column field="brand" header="Brand" sortable="true"></Column>
      <Column field="color" header="Color" sortable="true"></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

We set sortable to true to enable sorting for each column.

sortMode set to 'multiple' lets us sort by multiple columns.

Table Row Selection

We can enable selection for table rows with the selectionMode prop:

<template>
  <div>
    <DataTable
      :value="cars"
      v-model:selection="selectedCars"
      selectionMode="single"
      dataKey="vin"
    >
      <Column field="vin" header="Vin"> </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selectedCars: [],
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

dataKey has the property name of the unique identifier of each row.

We bind the selections to the selectedCars reactive property with v-model .

Conclusion

We can add pagination, row selection, and sorting to tables with PrimeVue’s table components.

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Table Cell Size

We can change table cell sizes with classes provided by PrimeVue.

For instance, we can write:

<template>
  <div>
    <DataTable :value="cars" class="p-datatable-sm">
      <Column field="vin" header="Vin"> </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

We add the p-datatable-sm to make the cells extra small.

Also, we can add p-datatable-lg to make the cells extra large.

Table Grid Lines

We can add table gridlines to cells by writing:

<template>
  <div>
    <DataTable :value="cars" class="p-datatable-gridlines">
      <Column field="vin" header="Vin"> </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

The p-datatable-gridlines lets us add the gridlines.

Striped Table Rows

We can make the table rows striped by adding the p-datatable-striped class:

<template>
  <div>
    <DataTable :value="cars" class="p-datatable-striped">
      <Column field="vin" header="Vin"> </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

Table Column Group

We can group table columns together with the ColumnGroup component:

<template>
  <div>
    <DataTable :value="cars" class="p-datatable-striped">
      <ColumnGroup type="header">
        <Row>
          <Column header="Vin" :rowspan="1"></Column>
          <Column header="Specs" :colspan="3"></Column>
        </Row>
      </ColumnGroup>
      <Column field="vin" header="Vin"> </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

We add the type='header' prop to replace the default column headers with the ColumnGroup header.

Conclusion

We can add tables with various styles into our Vue 3 app with PrimeVue.

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Split Buttons

We can add split buttons with the SplitButton component.

For instance, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import SplitButton from 'primevue/splitbutton';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("SplitButton", SplitButton);
app.mount("#app");

App.vue

<template>
  <div>
    <SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      items: [
        {
          label: "Update",
          icon: "pi pi-refresh",
          command: () => {
            alert("updated");
          },
        },
        {
          label: "Delete",
          icon: "pi pi-times",
          command: () => {
            alert("deleted");
          },
        },
      ],
    };
  },
  methods: {},
};
</script>

We add the items for the split button dropdown into the items array.

label has the label text for the dropdown item.

icon has the icon classes for the dropdown item.

command is set to a function that’s run when we click on the dropdown item.

We set items as the value of models to display the dropdown items.

label has the label text.

The icon prop has the icon classes.

We can also add one of the following classes to change the button styles:

• .p-button-secondary
• .p-button-success
• .p-button-info
• .p-button-warning
• .p-button-help
• .p-button-danger

Data Table

We can add a basic table into our Vue 3 app with PrimeVue’s DataTable and Column components.

For instance, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import ColumnGroup from 'primevue/columngroup';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("DataTable", DataTable);
app.component("Column", Column);
app.component("ColumnGroup", ColumnGroup);
app.mount("#app");

App.vue

<template>
  <div>
    <DataTable :value="cars">
      <Column field="vin" header="Vin"></Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

We have the cars array which set as the value of the value prop.

Then we display the column data with the Column component.

field has the property name of the cars array entry to display.

header has the corresponding column heading to display to the user.

We can customize how column data are displayed by populating the body slot of the Column component:

<template>
  <div>
    <DataTable :value="cars">
      <Column field="vin" header="Vin">
        <template #body="slotProps">
          <b>{{ slotProps.data.vin }}</b>
        </template>
      </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

We get the entry’s data with the slotProps.data property.

Conclusion

We can add split buttons and basic tables into our Vue 3 app with PrimeVue.

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Button Events

We can listen to events like clicks on the button.

For instance, we can write:

<template>
  <div>
    <Button label="alert" @click="onClick" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {
    onClick($event) {
      alert(JSON.stringify($event));
    },
  },
};
</script>

to listen to the click event with the @click directive.

Button Styles

We can add buttons with preset styles by adding one of the following classes:

• .p-button-secondary
• .p-button-success
• .p-button-info
• .p-button-warning
• .p-button-help
• .p-button-danger

For example, we can write:

<template>
  <div>
    <Button label="Secondary" class="p-button-secondary" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

to add the style.

Text Buttons

We can add text buttons by adding the p-button-text class:

<template>
  <div>
    <Button label="Submit" class="p-button-text" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

The button won’t have a background color and the text has the color that the background color would have in a regular button.

Outlined Button

We can add an outlined button with the p-button-outlined class:

<template>
  <div>
    <Button label="Primary" class="p-button-outlined" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

Link Button

The p-button-link class make the button a link:

<template>
  <div>
    <Button label="Link" class="p-button-link" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

Buttons with Badges

We can add buttons with badges with a few props:

<template>
  <div>
    <Button
      type="button"
      label="Messages"
      icon="pi pi-users"
      class="p-button-warning"
      badge="8"
      badgeClass="p-badge-info"
    />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

badge has the content for the badge.

icon has the icon classes.

badgeClass has the classes to apply to the badge.

Button Set

We can add a button set with the p-buttonset class:

<template>
  <div>
    <span class="p-buttonset">
      <Button label="Save" icon="pi pi-check" />
      <Button label="Delete" icon="pi pi-trash" />
      <Button label="Cancel" icon="pi pi-times" />
    </span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

Button Sizes

We can change button sizes with one of the following classes:

• p-button-sm
• p-button
• p-button-lg

sm is small and lg is large. No suffix is normal size.

For example, we can add a large button by writingL

<template>
  <div>
    <Button label="Large" icon="pi pi-check" class="p-button-lg" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

Custom Button Content

We can add custom button content into the default slot:

<template>
  <div>
    <Button> Custom Content </Button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

Conclusion

We can add buttons with various styles into our Vue 3 app with PrimeVue.

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Textarea

PrimeVue comes with the Textarea component to let us add a text area into our Vue 3 app.

To add it, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Textarea from 'primevue/textarea';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("Textarea", Textarea);
app.mount("#app");

App.vue

<template>
  <div>
    <Textarea v-model="value" autoResize rows="5" cols="30" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: '',
    };
  },
  methods: {},
};
</script>

The autoResize prop will make it auto resize according to the text entered.

rows and cols sets the number of rows and columns to display respectively.

Toggle Button

We can add the ToggleButton component to let us add a toggle button into our Vue 3 app.

For example, we can write:

<template>
  <div>
    <ToggleButton
      v-model="checked"
      onLabel="yes"
      offLabel="no"
      onIcon="pi pi-check"
      offIcon="pi pi-times"
    />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      checked: false,
    };
  },
  methods: {},
};
</script>

to add a toggle button that binds to the checked reactive property.

onLabel has the text that’s displayed when checked is true .

offLabel has the text that’s displayed when checked is false .

onIcon has the icon classes that’s applied when checked is true .

offIcon has the icon classes that’s applied when checked is false.

Checkbox with Three States

We can add a checkbox with an indeterminate state in addition to the checked and unchecked states with the TriStateCheckbox component.

To add it, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import TriStateCheckbox from 'primevue/tristatecheckbox';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("TriStateCheckbox", TriStateCheckbox);
app.mount("#app");

App.vue

<template>
  <div>
    <TriStateCheckbox v-model="value" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: false,
    };
  },
  methods: {},
};
</script>

to add it.

Buttons

PrimeVue comes with buttons in a variety of styles.

To add a basic button, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Button from 'primevue/button';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("Button", Button);
app.mount("#app");

App.vue

<template>
  <div>
    <Button label="Submit" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

The label prop is the text that’s displayed to the user.

We can add icons to the button by writing:

<template>
  <div>
    <Button label="Submit" icon="pi pi-check" iconPos="right" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

icon has the classes for the icon we want to add.

iconPos has the position of the icon.

Conclusion

We can add text areas, toggle buttons, 3 state check boxes, and buttons into our Vue 3 app with PrimeVue.