Contents
Description:
In my previous post, I have written about a multi-select drop-down component for Vue.js version 3. Now, here I am sharing with you another fancy multi-select component which is compatible with Tailwind CSS. And, it has many features.
Features:
Vue 2 & 3 supportNo dependencies100% coverageTypescript supportESM supportSingle select optionsMultiple select optionsTagsAsync optionsSearch & filteringCustom slotsEventsCSS vars supportTailwind & utility class supportFully configurableCSP compliant
How can I use it?
1. Install the component using npm, as following:
npm install @vueform/multiselect
2. Import the component in your project.
import Multiselect from ‘@vueform/multiselect’
3. Then, register the component and define the options, that will be shown on the front end.
export default {
components: {
Multiselect,
},
data() {
return {
value: null,
options: [
‘Batman’,
‘Robin’,
‘Joker’,
]
}
}
}
4. Now, create the template and add the multi-select component.
<template>
<div>
<Multiselect
v-model=”value”
:options=”options”
/>
</div>
</template>
Thanks for reading.
The post A Fancy Multi-select Drop-down For Vue.js Version 2 And 3 appeared first on Lipku.com.
Permanent link to this post here
