Category: Vue 3

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.

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 Group Multiple Selections

We can add a button group with multiple selections.

For instance, we can write:

<template>
  <div>
    <SelectButton
      v-model="selectedCity"
      :options="cities"
      optionLabel="name"
      multiple
    />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selectedCity: null,
      cities: [
        { name: "London", code: "LND" },
        { name: "Paris", code: "PRS" },
        { name: "Rome", code: "RM" },
      ],
    };
  },
  methods: {},
};
</script>

We add the multiple prop to enable multiple selections.

Also, we can customize the items displayed by populating the option slot:

<template>
  <div>
    <SelectButton
      v-model="selectedCity"
      :options="cities"
      optionLabel="name"
      multiple
    >
      <template #option="slotProps">
        <div>
          <b>{{ slotProps.option.name }}</b>
        </div>
      </template>
    </SelectButton>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selectedCity: null,
      cities: [
        { name: "London", code: "LND" },
        { name: "Paris", code: "PRS" },
        { name: "Rome", code: "RM" },
      ],
    };
  },
  methods: {},
};
</script>

We get the option data from theslotProps.option slot.

Slider

PrimeVue comes with a slider input component.

For instance, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Slider from 'primevue/slider';
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("Slider", Slider);
app.mount("#app");

App.vue

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

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

We add the Slider component and we bind the selected value to the value reactive property with v-model .

Also, we can change it to a range slider with the range prop:

<template>
  <div>
    <Slider v-model="value" range />
  </div>
</template>

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

We can set the range slider to display vertically with the orientation prop:

<template>
  <div>
    <Slider v-model="value" orientation="vertical" />
  </div>
</template>

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

And we can snap the slider value to the nearest increment with the step prop:

<template>
  <div>
    <Slider v-model="value" :step="20" />
  </div>
</template>

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

Also, we can set the min and max values with the min and max props:

<template>
  <div>
    <Slider v-model="value" :step="20" :min="50" :max="200" />
  </div>
</template>

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

Conclusion

We can add button groups that allow multiple selections and sliders into our Vue 3 app with PrimeVue.