Vue OnOff Toggle

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

Live Demo

Installation

npm install vue-onoff-toggle --save

or with yarn,

yarn add vue-onoff-toggle

Import in Vue.js

In your main.js file:

import Vue from 'vue'
import OnoffToggle from 'vue-onoff-toggle'

Vue.use(OnoffToggle)

Import in Nuxt.js

Create a new plugin in plugins/vue-onoff-toggle.js:

import Vue from 'vue'
import OnoffToggle from 'vue-onoff-toggle'

Vue.use(OnoffToggle)

Add this new plugin to nuxt.config.js

module.exports = {
  // ...
  plugins: [
    // ...
    '~plugins/vue-onoff-toggle'
  ]
}

How to use

After importing the library, use onoff-toggle tag inside your vue template:

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

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

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

<onoff-toggle
  v-model="checked"
  onColor="#008F13"
  :shadow="false"
/>

<onoff-toggle
  v-model="checked"
  theme="ios"
  onColor="#008F13"
/>

<onoff-toggle
  v-model="checked"
  theme="material"
  thumbColor="#008F13"
/>

Props

Browser Compatibility

• Chrome: 40+
• Firefox: 25+
• IE: 11+