Select images with vue-select - vuejs3

Question

How will I do select with vue-select in vue 3?
<v2-select :options="options" label="title">
<template slot="option" slot-scope="option">
<img :src="option.url">
{{ option.url }}
</template>
</v2-select>
Data:
options: [
{
title: 'Read the Docs',
icon: 'fa-book',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View on GitHub',
icon: 'fa-github',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View on NPM',
icon: 'fa-database',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View Codepen Examples',
icon: 'fa-pencil',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
}
],
}
example:
https://stackblitz.com/edit/vue-5ni27c?file=src%2FApp.vue,package.json,src%2Fcomponents%2FHelloWorld.vue
In vue 2 it work, bot in vue 3 dont

Answer 1

Your slot binding is wrong.
Check the Docs: Vue - Named Slots and Vue-Select - Slots - option
This
<template slot="option" slot-scope="option">
should be written so
<template v-slot:option="option">
or so (using the shorthand #)
<template #option="option">
Then it works:
UPDATE:
slot-scope was deprecated in Vue2

Answer 2

Using the following version
"vue-select": "^4.0.0-beta.5"
And installing like that in main.js
import { createApp } from "vue"
import vSelect from "vue-select"
import App from "./App.vue"
const app = createApp(App)
app.component("v-select", vSelect)
app.mount("#app")
You can then use the following
<template>
<v-select :options="options" label="title">
<template #option="option">
<span><img :src="option.image" />{{ option.title }}</span>
</template>
</v-select>
</template>
<script>
export default {
data() {
return {
options: [
{
title: "Read the Docs",
image: "https://source.unsplash.com/random/20x20?sig=1",
url: "https://codeclimate.com/github/sagalbot/vue-select",
},
{
title: "View on GitHub",
image: "https://source.unsplash.com/random/20x20?sig=2",
url: "https://codeclimate.com/github/sagalbot/vue-select",
},
{
title: "View on NPM",
image: "https://source.unsplash.com/random/20x20?sig=3",
url: "https://codeclimate.com/github/sagalbot/vue-select",
},
{
title: "View Codepen Examples",
image: "https://source.unsplash.com/random/20x20?sig=4",
url: "https://codeclimate.com/github/sagalbot/vue-select",
},
],
};
},
};
</script>
For this kind of result
PS: be careful, some examples in the documentation are indeed not up to date regarding Vue's API, especially slot-scope as explained here (not available anymore in Vue3).