@hbilal_9/vue-select NPM

Vue Select

Vue Select is a versatile dropdown component built for Vue.js applications. It offers a pre-built template for standard filterable select dropdowns, saving you development time. Key features include:

Filtering: Easily search and filter through a list of options using a search bar.
Multiple Selection: Allow users to pick multiple options from the dropdown.
Customization: Tailor the dropdown's appearance and behavior to perfectly match your application's design and functionality.
Accessibility: Vue Select prioritizes accessibility, ensuring all users can interact with the dropdown seamlessly.
Lightweight: Despite its rich features, Vue Select maintains a small footprint, keeping your application performant.

Screenshots

App Screenshot

Installation

Install Vue Select with npm

  npm i @hbilal_9/vue-select

Browser with CDN

<script src="https://unpkg.com/@hbilal_9/vue-select/dist/index.js"></script>

Setup

Import vSelect in main.ts

  import vSelect from '@hbilal_9/vue-select'
  import '@hbilal_9/vue-select/dist/style.css'
  app.use(vSelect)

Nuxt Setup

Create a plugin named vue-select.ts in plugins folder

plugins/vue-select.ts

Add the following code in vue-select.ts

  import vSelect from "@hbilal_9/vue-select";
  import "@hbilal_9/vue-select/dist/style.css";
  export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(vSelect);
  });

Usage

with array of objects

<script setup lang="ts">
  import { ref } from 'vue';
  const data = ref("")

  const options = ref([
  {
	id: 1,
	name: "Jone Shone",
  },
  {
	id: 2,
	name: "Snow White",
  },
  {
	id: 3,
	name: "kate Winslet",
  },
])

</script>

<template>
  <v-select
	  v-model="data"
	  :options="options"
	  :reduce="(opt: any) => opt.id"
	  :label="(opt: any) => opt.name"
	  placeholder="choose user"
	  :multiple="true"
  />
</template>

with array of strings

<script setup lang="ts">
  import { ref } from 'vue';
  const data = ref("")

  const options = ref(['us', 'uk', 'pk', 'in', 'fr'])

</script>

<template>
  <v-select
	v-model="data"
	:options="options"
	:reduce="(name: any) => name"
	:label="(name: any) => name"
    placeholder="choose country"
  />
</template>

Emits

you can also pass change event

  <v-select @change="getData"></v-select>

in script

function getData(e){
    console.log(e)
}

Props

Prop	Description	Type	Default
placeholder	Select Placeholder	String	Choose option
options	array of strings or objects	Array	[]
label	callback method that return label	method	() => {}
reduce	callback method that data you wanna receive in that v-model	method	() => {}
filter-class	you can change filter input style, you can add any css property with !important	string	default style
class	you can also modify default style but make sure add !important with each property	string	default style