# @2alheure/vue-toggle

> A Simple VueJS toggle button

Latest version **1.1.1** (published 2021-08-31) · WTFPL license · 0 weekly downloads

## Install

```sh
npm install @2alheure/vue-toggle
pnpm add @2alheure/vue-toggle
yarn add @2alheure/vue-toggle
bun add @2alheure/vue-toggle
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2021-08-31 |
| First published | 2021-05-04 |
| Weekly downloads | 0 |
| License | WTFPL |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | 2alheure |
| Maintainers | 2alheure |
| Keywords | Vue.js, Vue 3, Button, Component, Toggle |

## Links

- npm: https://www.npmjs.com/package/@2alheure/vue-toggle
- Repository: https://github.com/2alheure/vuejs_toggle
- Homepage: https://github.com/2alheure/vuejs_toggle#readme
- Issues: https://github.com/2alheure/vuejs_toggle/issues
- npm.io page: https://npm.io/package/@2alheure/vue-toggle

## Recent versions

- 1.1.1 (latest) — 2021-08-31
- 1.1.0 — 2021-08-20
- 1.0.0 — 2021-05-04

## README

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

- [Vue.js Toggle button](#vuejs-toggle-button)
  - [Simple usage](#simple-usage)
  - [Props](#props)
  - [Events](#events)
  - [Events](#events-1)

It has been inspired by [this article by ALEXANDRU STRATULAT](https://sandulat.com/blog/custom-switch-with-tailwind-and-vue), 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 :  
```js
<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 |

---
_Source: https://npm.io/package/@2alheure/vue-toggle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._