Vue 3 Development with the PrimeVue Framework — MultiSelect and Password Input

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.