Vue3 Dropdown

Vue Dropdown is used to select an item from a list of options. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Dropdown from 'primevue/dropdown';

Getting Started

Dropdown requires a value to bind and a collection of arbitrary objects along with the optionLabel property to specify the label property of the option.

<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" />

data() {
    return {
        selectedCity: null,
        cities: [
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ]
    }
}

Placeholder

Common pattern is providing an empty option as the placeholder when using native selects, however Dropdown has built-in support using the placeholder option so it is suggested to use it instead of creating an empty option.

Filtering

Options can be filtered using an input field in the overlay by enabling the filter property.

<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" filterPlaceholder="Find Car"/>

Custom Content

Label of an option is used as the display text of an item by default, for custom content support define an option template that gets the option instance as a parameter.

In addition the value template can be used to customize the selected value.

<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true">
    <template #value="slotProps">
        <div class="p-dropdown-car-value" v-if="slotProps.value">
            <img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" />
            <span>{{slotProps.value.brand}}</span>
        </div>
        <span v-else>
            {{slotProps.placeholder}}
        </span>
    </template>
    <template #option="slotProps">
        <div class="p-dropdown-car-option">
            <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
            <span>{{slotProps.option.brand}}</span>
        </div>
    </template>
</Dropdown>

Theming

Dropdown supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Dropdown showcase for demos and documentation.