Slots!!!
Did someone say sloths?
Slots
You can now add header, footer and suggestion slots to vue-autosuggest components. This allows you to not have to use renderSuggestion and supercharges this component's api:
- render elements are together so it's easier to read
- easier for vue users and doesn't force users to think about createElement or JSX for suggestion styling
- more control over header/footer
Usage would look like this:
<vue-autosuggest ...>
<template slot="header">
header slot content here
</template>
<template slot-scope="{suggestion}">
<div v-if="suggestion.name === 'blog'">
<a target="_blank" :href="suggestion.item.url">{{suggestion.item.value}}</a></div>
<div v-else>{{suggestion.item}}</div>
</template>
<template slot="footer">
footer content here
</template>
</vue-autosuggest>
Docs in README:
https://github.com/Educents/vue-autosuggest#slots