Vue 3 Development with the PrimeVue Framework — Radio Button, Rating Input, and Select Button Group

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.