Vue.js Toggle button

A simple Vue.js toggle button.
This component is compatible with Vue 3.

• Vue.js Toggle button
  • Simple usage
  • Props
  • Events
  • Events

It has been inspired by this article by ALEXANDRU STRATULAT, so check it out if you wish to understand how it works.

Simple usage

First run npm install @2alheure/vue-toggle.
Then its usage is simple :

<template><Toggle v-model="isToggled" /></template>

<script>
import Toggle from "@2alheure/vue-toggle";

export default {
  components: {
    Toggle
  },
  data() {
    return {
      isToggled: false
    }
  }
};
</script>

Please note the v-model directive, as it is usable as an input (and is one, intrinsically).

Props

| Name | Type | Default value | Description | | :--------- | :-----: | :----------------: | ------------------------------------------------------ | | name | String | Some random string | The name of the inner input. | | colorOK | String | #0d9488 | The color of the toggle when it is toggled ON. | | colorKO | String | #6b7280 | The color of the toggle when it is toggled OFF. | | width | String | 3rem | The width of the toggle. | | height | String | 1.5rem | The height of the toggle. | | modelValue | Boolean | false | The prop lnked to the v-model directive. (mandatory) |

Events

Events

| Name | Value type | Value | Description | | :---------------- | :--------: | :--------------: | ------------------------------------- | | update:modelValue | Boolean | The toggle value | Emitted each time the toggle switches |