Get some recommended tips based on the current input.


This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

Basic Usage

Autocomplete component provides input suggestions.

Custom template

Customize how suggestions are displayed.

Search data from server-side.

Custom Loading 2.5.0

Override loading content.



model-value / v-modelbinding valuestring
placeholderthe placeholder of Autocompletestring
clearablewhether to show clear buttonbooleanfalse
disabledwhether Autocomplete is disabledbooleanfalse
value-keykey name of the input suggestion object for displaystringvalue
debouncedebounce delay when typing, in millisecondsnumber300
placementplacement of the popup menuenumbottom-start
fetch-suggestionsa method to fetch input suggestions. When suggestions are ready, invoke callback(data:[]) to return them to AutocompleteFunction
trigger-on-focuswhether show suggestions when input focusbooleantrue
select-when-unmatchedwhether to emit a select event on enter when there is no autocomplete matchbooleanfalse
namesame as name in native inputstring
aria-label a11y 2.7.2native aria-label attributestring
hide-loadingwhether to hide the loading icon in remote searchbooleanfalse
popper-classcustom class name for autocomplete's dropdownstring
popper-append-to-body deprecatedwhether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to falsebooleanfalse
teleportedwhether select dropdown is teleported to the bodybooleantrue
highlight-first-itemwhether to highlight first item in remote search suggestions by defaultbooleanfalse
fit-input-widthwhether the width of the dropdown is the same as the inputbooleanfalse


selecttriggers when a suggestion is clickedFunction
changetriggers when the icon inside Input value changeFunction


defaultcustom content for input suggestionsobject
prefixcontent as Input prefix-
suffixcontent as Input suffix-
prependcontent to prepend before Input-
appendcontent to append after Input-
loading 2.5.0override loading content-


activatedif autocomplete activatedobject
blurblur the input elementFunction
closecollapse suggestion listFunction
focusfocus the input elementFunction
handleSelecttriggers when a suggestion is clickedFunction
handleKeyEnterhandle keyboard enter eventFunction
highlightedIndexthe index of the currently highlighted itemobject
highlighthighlight an item in a suggestionFunction
inputRefel-input component instanceobject
loadingremote search loading indicatorobject
popperRefel-tooltip component instanceobject
suggestionsfetch suggestions resultobject