Vue.js 2.0+ toggle / switch button - simple, pretty, customizable.

Feel free to ask questions or propose features in the "Issues" section

Live demo here

Install:

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

Import:

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

Use:

<toggle-button @change="onChangeEventHandler"/>
<toggle-button :value="false" :color="#82C7EB" :sync="true" :labels="true"/>
<toggle-button :value="true" :labels="{checked: 'Foo', uncheked: 'Bar'}"/>

Properties

Name	Type	Default	Description
value	Boolean	false	Initial state of the toggle button
sync	Boolean	false	If set to true, will be watching changes in value property and overwrite the current state of the button whenever value prop. changes
color	String	#75C791	Color of the button when checked
labels	[Boolean, Object]	false	If Boolean - shows/hides default labels ("on" and "off") If Object - sets custom labels for both states. Format: {checked: 'Foo', unchecked: 'Bar'}
width	Number	50	Width of the button, default is 50

Events

Name	Description
change	Triggered whenever state of the component changes. Contains: value - state of the object srcEvent - source click event