A customizable rocker switch component for Vue.js.



npm install vue-rocker-switch --save

Usage example

  <RockerSwitch />

// Import package
import RockerSwitch from "vue-rocker-switch";
// Import styles
import "vue-rocker-switch/dist/vue-rocker-switch.css";

export default {
  name: "App",
  components: {


Prop Description Default value Type
value Boolean value attached to the rocker switcher. This will be used to initialize the component value too. false Boolean
size rocker switch size, it can be a string (small, medium and large) or a decimal number small String or Number
labelOn Text of the On label On String or Number
labelOff Text of the Off label Off String or Number
activeColorLabel Text color used when the On label is active #fff #fff String
inactiveColorLabel Text color used when the Off label is inactive #333 #333 String
backgroundColorOn Background color of the On button #0084d0 #0084d0 String
backgroundColorOff Background color of the Off button #bd5757 #bd5757 String
borderColor Border color of the rocker switch #eee #eee String
toggle Allow to the rocker switch to behave as a toggle switch true Boolean


Event Description
change Fires each time the rocker switch changes.

Development setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint