Home Buttons Simple Lightweight Customizable OnOff Toggle Vue.js 2

Simple Lightweight Customizable OnOff Toggle Vue.js 2

Buttons webcodeflow · February 23, 2022 · Comments off

Vue OnOff Toggle is a simple and lightweight on/off toggle component made with Vue.js. Provides multiple themes with default configurations. You can also customize the size, color, and borders.

vue toggle switch button codepen, vue js toggle button example, vue js toggle button not working, vue 3 toggle switch case button

Dark & Light Switch Mode Toggle for Bootstrap 5

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-onoff-toggle
# NPM
$ npm i vue-onoff-toggle

1. Import the registration component.

import OnoffToggle from 'vue-onoff-toggle'

new Vue({
  components: {
    OnoffToggle
  },
  data() {
    return {
      checked: false // true
    }
  }
})

2. Add the toggle component to the application.

<onoff-toggle v-model="checked" />

3. Props available to configure the switch.

value: { type: Boolean, default: false },
theme: { type: String, default: 'default' },
name: { type: String },
disabled: { type: Boolean, default: false },
onColor: { type: String },
offColor: { type: String },
thumbColor: { type: String },
borderColor: { type: String },
width: { type: [Number, String] },
height: { type: [Number, String] },
margin: { type: [Number, String] }

On/off Toggle Component With Multiple Themes, Vue OnOff Toggle Plugin/Github