Vue.js 2 OnOff Toggle - simple, lightweight, customizable
MIT License
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.
npm install vue-onoff-toggle --save
or with yarn
,
yarn add vue-onoff-toggle
In your main.js
file:
import Vue from 'vue'
import OnoffToggle from 'vue-onoff-toggle'
Vue.use(OnoffToggle)
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'
]
}
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"
/>