Vue Button Toggle Component

A Customizable Toggle/Switch Button Component For Vue

Installation

npm

npm i vue-button-toggle --save

Usage

main.js

//...
import VueButtonToggle from "vue-button-toggle";
Vue.component("vue-button-toggle", VueButtonToggle);
//...

Or in component

<template>
  <div>
    <vue-button-toggle
      v-model="wifiSwitch"
      bg-active-color="#0071FF"
      bg-deactive-color="#787880"
      dot-active-color="#FFFFFF"
      dot-deactive-color="#FFFFFF"
    >
    </vue-button-toggle>
  </div>
</template>

<script>
  import VueButtonToggle from "vue-button-toggle";
  export default {
    components: {
      VueButtonToggle: VueButtonToggle,
    },
  };
</script>

Nuxt nuxtjs

npm

npm i vue-button-toggle --save

Config as plugin

/plugins/vue-button-toggle.js :

import Vue from "vue";
import VueButtonToggle from "vue-button-toggle";

Vue.component("vue-button-toggle", VueButtonToggle);

/nuxt.config.js

plugins: ['~/plugins/vue-button-toggle.js'],

Usage

<template>
  <div>
    <vue-button-toggle
      v-model="wifiSwitch"
      bg-active-color="#0071FF"
      bg-deactive-color="#787880"
      dot-active-color="#FFFFFF"
      dot-deactive-color="#FFFFFF"
    >
    </vue-button-toggle>
  </div>
</template>

Examples

Example1

<template>
  <div>
    <vue-button-toggle
      v-model="switchValue"
      bg-active-color="#0071FF"
      bg-deactive-color="#787880"
      dot-active-color="#FFFFFF"
      dot-deactive-color="#FFFFFF"
    >
      <template #before>
        <div style="margin-right: 15px;">Before!</div>
      </template>
      <template #after>
        <div style="margin-left: 15px;">After!</div>
      </template>
    </vue-button-toggle>
  </div>
</template>

Example2

<template>
  <div>
    <vue-button-toggle
      v-model="switchValue"
      bg-active-color="#0071FF"
      bg-deactive-color="#787880"
      dot-active-color="#FFFFFF"
      dot-deactive-color="#FFFFFF"
    >
    </vue-button-toggle>
  </div>
</template>

Change log

0.0.4 (2022-03-06)

• build

0.0.3 (2022-03-06)

• fixed v-model

0.0.2 (2022-03-05)

• add readme file

0.0.1 (2022-03-05)

• first release