Simple Toggle Switch Component For Vue – v-toggle

Install & Download:

# Yarn
$ yarn add v-toggle
# NPM
$ npm install v-toggle --save

Description:

A simple, lightweight switch/toggle button component for Vue.js.

Usage:

Import the v-toggle.

import v-toggle from 'v-toggle';

In your template.

<div class="toggles">
  <v-toggle id="v-t-default" v-model="toggleValue" />    
</div>
<div class="toggles">
  <v-toggle v-bind:width="36" v-bind:height="22"
      active-color="peru" inactive-color="red"
              id="v-t-small" v-model="toggleSmall" /> 
</div>
<div class="toggles">
  <v-toggle id="v-t-disabled" disabled="true" 
        v-model="vDisabled" />
</div>
<div class="toggles">
  <v-toggle color-gradient
    active-color="linear-gradient(to left, #b3205f, #7d1642)"
    inactive-color="linear-gradient(to right, #20535e, #348899)"
    id="v-t-gradient" v-model="toggleGradient" />    
</div>

Activate the toggle switches.

new Vue({
  el: '#app',
  data: {
    toggleGradient: true,
    toggleValue: true,
    toggleSmall: true,
    vDisabled: true,
  },
  components: {
    vToggle: window.vToggle.default,
  },
});

Default props.

colorValue: false,
successValue: false,
toggleGradient: false,
toggleSmall: false,
toggleValue: true,

Preview: