vue-select-sfc v0.1.1

vue-select-sfc

A simple, fast custom Vue Select component. Supports keyboard functionality and searching.

• ZERO dependencies
• SSR Support
• ~7kb component size
• Fast
• Simple
• Easy styling

Install

yarn add vue-select-sfc

# or use npm

npm install vue-select-sfc

Registering

Globally

import Vue from 'vue'
import VueSelectSfc from 'vue-select-sfc'

Vue.component('vue-select-sfc', VueSelectSfc)

Component

import VueSelectSfc from 'vue-select-sfc'

export default {
  components: {
    VueSelectSfc,
  },
  //...
}

Using it

<vue-custom-select
  @selectionChanged="changeSelected"
  :options="options"
  label="Choose your country"
/>

The @selectionChanged is an event emitted from the component with the new value, leaving it up to you what to do with it. Using the 'changeSelected' method or any method name you want you can handle the emitted event.

For example:

data() {
  return {
    selected: ''
  }
},
methods: {
  changeSelected(selected) {
    console.log(selected)
    this.selected = selected
  }
}

The options array is simply an array of strings you want to display as your options.

For example:

data() {
  return {
    options: ['Option 1', 'Option 2', 'Option 3']
  }
}

NUXT SSR

Add plugin to nuxt.config.ts

export default {
  //...
  plugins: [{ src: '~/plugins/vue-select-sfc', mode: 'client' }],
  //...
}

Usage

<client-only>
  <vue-select-sfc
    @selectionChanged="changeSelected"
    :options="options"
    label="Choose your country"
  />
</client-only>

CSS customisation

.your-container {
  .vss-select {
    .vss-label {
    }

    .vss-container {
      &::after {
      }

      &.vss--active {
      }

      .vss__selected {
      }

      .vss__search {
      }
    }

    .vss__dropdown {
      .vss__dropdown-option {
        &.vss__dropdown-option--selected {
        }
      }
    }
  }
}

License

MIT