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.

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.

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.

Radio Button

We can add radio buttons into our Vue 3 app with PrimeVue’s RadioButton component.

To do this, we write:

main.js

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

App.vue

<template>
  <div>
    <div class="p-field-radiobutton">
      <RadioButton id="city" name="city" value="Los Angeles" v-model="city" />
      <label for="city">Los Angeles</label>
    </div>
    <div class="p-field-radiobutton">
      <RadioButton id="city2" name="city" value="New York" v-model="city" />
      <label for="city2">New York</label>
    </div>
  </div>
</template>

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

We register the RadioButton component in main.js

Then we add them into the App component.

We bind both to the same reactive property so that they are set to the value prop of the selected one.

The p-field-radiobutton class lets us add the radio button with the label beside it.

Rating Input

We can add a rating input into our Vue 3 app with the Rating component.

For instance, we can write:

main.js

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

App.vue

<template>
  <div>
    <Rating v-model="val" />
  </div>
</template>

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

We can change the number of stars displayed with the stars prop:

<template>
  <div>
    <Rating v-model="val" :stars="8" />
  </div>
</template>

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

Also, we can remove the cancel icon that lets us reset the value by setting the cancel prop to false :

<template>
  <div>
    <Rating v-model="val" :stars="8" :cancel="false" />
  </div>
</template>

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

Select Button Group

PrimeVue comes with the SelectButton component to let us add a button group.

We can click on a value to select it.

For instance, we can write:

main.js

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

App.vue

<template>
  <div>
    <SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
  </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 SelectButton component with the options prop to set the options for the button group.

And we bind the selected value to the selectedCity reactive property with the v-model directive.

optionLabel is set to the property name with the value we want to display to the user.

Conclusion

We can add radio buttons, rating inputs, and button groups 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.

MultiSelect

PrimeVue comes with a multi select dropdown component to let us select multiple choices.

To add it, we can add the MultiSelect component:

main.js

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

App.vue

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

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

options lets us set the options to render.

optionLabel has the name of the property to render as choices.

The filter prop adds an input box to let users search for choices.

We can display selected choices as chips with the display='chip' prop:

<template>
  <div>
    <MultiSelect
      v-model="selectedCity"
      :options="cities"
      optionLabel="name"
      display="chip"
    />
  </div>
</template>

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

We can customize how the selected choices are displayed by populating the value slot.

And we can customize how each option is displayed by populating the option slot:

<template>
  <div>
    <MultiSelect
      v-model="selectedCity"
      :options="cities"
      optionLabel="name"
      display="chip"
    >
      <template #value="slotProps">
        <div v-for="option of slotProps.value" :key="option.brand">
          <span>{{ option.name }}</span>
        </div>
        <template v-if="!slotProps.value || slotProps.value.length === 0">
          Select Brands
        </template>
      </template>
      <template #option="slotProps">
        <div>
          <span>{{ slotProps.option.name }}</span>
        </div>
      </template>
    </MultiSelect>
  </div>
</template>

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

We can get options from the slotProps of each slot.

Password Input

PrimeVue comes with a password input.

We can add it with the Password component:

main.js

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

App.vue

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

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

It comes with a password strength meter.

A medium password has at least 1 lowercase character, 1 uppercase or number, and a minimum of 6 characters.

And a strong password has at least 1 lowercase character, at least 1 uppercase character, at least 1 numeric character, and a minimum of 8 characters.

Conclusion

We can add a multi select dropdown and password input into our Vue 3 app with the PrimeVue framework.

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.

Knob

PrimeVue’s Knob component lets us add a dial that displays a numeric value on the screen with a bar.

We can also use it to set numeric values.

To add it, we can write:

main.js

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

App.vue

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

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

We register the component in main.js .

Then we add it into the App component and bind the selected value to value with v-model .

We can change its size with the size prop by setting the size in pixels:

<template>
  <div>
    <Knob v-model="value" :size="200" />
  </div>
</template>

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

Listbox

PrimeVue comes with a listbox component.

For example, we can write:

main.js

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

App.vue

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

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

The options prop lets us specify the options.

optionLabel has the property name of each entry with the value to display.

We can let users select multiple items with the multiple prop:

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

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

We can customize how the items are displayed by writing:

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

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

We populate the option slot to customize how the items are displayed.

slotProps.option has the item.

The filter prop adds an input box to let us filter the conten

Conclusion

We can add knobs and listboxes into our Vue 3 app with the PrimeVue framework.

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.

Switch

PrimeVue comes with the InputSwitch component that renders a switch.

To add it, we can write:

main.js

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

App.vue

<template>
  <div>
    <InputSwitch v-model="checked" />
  </div>
</template>

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

We bind the switch’s value to a reactive property with v-model .

Text Input

We can add the text input by using the InputText component.

To add it, we write:

main.js

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

App.vue

<template>
  <div>
    <InputText type="text" v-model="value" />
  </div>
</template>

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

We bind the entered value to a reactive property v-model .

Also, we can add icons beside the input with the i element with a few classes:

<template>
  <div>
    <span class="p-input-icon-left">
      <i class="pi pi-search" />
      <InputText type="text" v-model="value" placeholder="Search" />
    </span>
  </div>
</template>

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

The p-input-icon-left class lets us add an icon to the left side of the input box.

p-input-icon-right lets us add an icon to the right side of the input box.

The p-input-filled class lets us add a gray background to the input box:

<template>
  <div class="p-input-filled">
    <InputText type="text" v-model="value" placeholder="Search" />
  </div>
</template>

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

Float Label

We can add float labels into our app.

For example, we can write:

<template>
  <div class="p-fluid p-grid">
    <div class="p-m-6">
      <span class="p-float-label">
        <InputText id="inputtext" type="text" v-model="value" />
        <label for="inputtext">InputText</label>
      </span>
    </div>
  </div>
</template>

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

to add it.

We add the p-float-label class to the container to let us add the float label.

Then we add the label element inside the container to make it a float label.

This also works with the Chips , InputMask , InputNumber , MultiSelect , and Textarea components.

Conclusion

We can add switches, text inputs, and float labels into our Vue 3 app with PrimeVue.