# Vue-autosuggest - slots! 🎰
Did someone say sloths?
# Slots!
This feature has been one that I’ve been wanting to add since I initially created Vue-autosuggest. I am so excited.
# History of the API
Initially, I modeled the api after a popular react library. React-autosuggest is
good because it gives you lots of control over rendering, and I wanted that
same level in my component. Vue-autosuggest initially was using object
inheritance to inject a user’s custom component (e.g. UrlSection.vue
) that
inherited from the base component so they could use any number of modifications
to the rendering inside template tags. Inheritance (we found out the hard way)
is typically a terrible idea in Vue SFCs, because when one component extends
another, they do not share templates. This means that sub-components are brittle
and so it was not fair to tell users to use inheritance for full rendering.
This is why we introduced renderSuggestion
. Now users would no longer have to
extend the base component and could now access data inside a method and even use
JSX to tell vue-autosuggest how to style the items in the autosuggest results
container.
renderSuggestion(suggestion) {
return <div style={{ color: "red" }}>{suggestion.name}</div>;
}
This was great! It gave people full control and made Vue users feel like React developers with that sweet JSX (because we all know we have React envy, don’t try and hide it).
# The Solution — Slots!
The problem was that we’re Vue developers, not React developers. We have an ecosystem of tooling and I wanted the component to be consistent with an experience that Vue devs are used to… SLOTS!
<vue-autosuggest ...>
<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>
</vue-autosuggest>
Now, instead of having to scroll down to the methods section of your component
to see how item rendering is working, you can simply inline the html inside the
slot. Aaaa feels so nice to have scoped slots. Did I mention that this is not a
major release? Everything is backwards compatible and you can still use
renderSuggestion
if you want.
Check out the codesandbox example here:
If you enjoyed reading this, follow me on twitter where my DM’s are always open, and also give vue-autosuggest a try and let me know what you think!