Vue Typeahead Component


1.4.13 years ago4 years agoMinified + gzip package size for @cranespud/vue-typeahead in KB



Typeahead component for Vue2 with customizable dropdown items through slots

Checkout the demo here


With npm

npm i @cranespud/vue-typeahead


import VueTypeahead from '@cranespud/vue-typeahead'

// Then register it as a global component 
Vue.Component('vue-typeahead', VueTypeahead);

// or as a local component

new Vue({
  el: 'body',
  data: {   
  components: {
    typeahead: VueTypeahead

Then on the template




A an array of items to be displayed as the match list


The selected option from the list


Event triggered when user types in into the component. Is your responsibility to handle this event and retrieve the data.


If your matches consists of an array of objects then this is the name of the property to be used as a the label on the list


A function that accepts as a parameter a "match" object, used to perform custom transformations before displaying the label. This overrides labelAttr

Customizing the matches list

You can customize the displayed options by providing your own slot template; within the slot the current object is published as "match" property, for example

    <typeahead v-model="..." @change="..." :matches="..">
        <div slot="typeahead-match" slot-scope="props">
            <!-- fancy html start -->
            <span>{{props.match.employee}} - {{props.match.job}}</span>
            <!-- fancy html ends -->

You can easily override the default styles as well, here is the entire stylesheet

    position: relative;
    padding: 1px;
    width: 100%;
    box-sizing: border-box;

    width: 100%;
    margin: 0;
    box-sizing: border-box;

    border: 1px solid #ccd0d2;
    position: absolute !important;
    width: 100%;
    background: white;
    border-radius: 4px;
    padding: 0;
    margin-top: 0;
    z-index: 100;
    position: relative;

    list-style: none;
    padding: 5px 10px;
    display: block;    
    margin: 0;
    text-align: left;
        cursor: pointer;
        background: #337ab7;
        border: 1px solid #2e6da4;
        color: #fff;
        font-weight: bold;

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.