vue-simple-custom-select v1.0.11

Vue Simple Custom Select

A simple Vue component that allows you to create a custom select without any efforts.

Demo available here

Get started

npm i vue-simple-custom-select

You can then use it by importing it in your chosen Vue project.

<template>
 <vue-simple-select 
   v-model="selected"
   :options="options" 
 />
</template>

<script>
import VueSimpleSelect from 'vue-simple-custom-select'

export default {
  name:  'Your component',
  components: {
    VueSimpleSelect 
  },
  data() {
    return {
      selected: {},
      options: [
        {
          label: 'Label',
          value: 'value'
        }
      ]
    }
  }
}
</script>

Props

V-model

The component uses a custom model, it is binded to the value prop and to the change event.

Therefore you do not have to use the prop value or listen to change, simply bind a v-model like in this example.

Slots

This custom select can be customised through slots.

Methods

This component's slots give acces to differents methods allowing you to customize its behavior.

Styles

The components uses only a few styles that can be easily changed and adapted. You can even add your own classes using slots.

Every class is nested inside .vue-simple-select-container.

Every class is prefixed by vue-simple-select-.

Side notes

The component is originally made for my personnal use and therefore may contain bugs (that can be reported on the GitHub repo).

Finding documentation on how to use a preprocessor and install TailwindCSS with Vue-Rollup wasn't an easy task. So I decided to use laravel-mix to build a simple css file that is then used in the component. I am definetly open for suggestions on how to improve this process or any other aspect of the component.