Vue 3 Development with the PrimeVue Framework — Knob and Listbox

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.