Vue.js toggle / switch button plugin

vue-js-toggle-button

Need some toggle/switch buttons for your project? You can use the Vue.js toggle plugin, with simple usage, pretty buttons & customization options. You can have custom labels, colors and width and it can be programatically set/reset.

Play with the live demo here.

Take a look at the following example with a simple implementation.

Example

Install:

npm install vue-js-toggle-button --save

Import:

import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)

Usage:

<div class="main">
    <toggle-button @change="onChangeEventHandler"/>
    <toggle-button 
    :value="false" :color="color" :sync="true" :labels="true"
    />
    <toggle-button 
    :value="true" :labels="{checked: 'Active', uncheked: 'What now?'}"
    />
</div>  

You can bind the properties with your data, like color here.

Result:

To learn more about this plugin check the GitHub Repository with everything you’ll need to get started.