vue-toggle-component makes an ease to use, lightweight and highly customizable toggle component for Vue.js. This component is available in both light and dark mode and it supports Vue 3.

!npm bundle size
!npm
!GitHub issues
!npm
!GitHub Repo stars

!Light theme
!Dark theme

Features

- 🍞 Easy: Easy use with minimal required properties.
- 🍤 Tiny: Small footprint < 4kb which makes your apps faster to load.
- ✅ Accessible: ARIA attributes in the component which makes it very accessible.

Getting Started

$3

#### Installing the package
``sh

install with yarn

yarn add vue-toggle-component

install with npm

npm install vue-toggle-component --save
`

$3

#### Example
`html


`

#### Properties that vue-toggle-component uses
| Property name | Type | Default | Required |Description |
| ------------- | --------- | --------- | -------- | -------------------------------------------------------------------------------------------------- |
| name | String | ❌ | ✅️ | Set's the name value of the input (checkbox). Useful for persisting data. |
| title | String | ❌ | ✅ | The title that is displayed next to the toggle. |
| activeColor | String | #9FD6AE | ❌ | The color that is displayed when the toggler is active. |
| darkTheme | Boolean | false | ❌ | Set's dark mode to active. (note that this will not change the background like in the preview GIF) |
| disabled | Number | false | ❌ | Disables the toggler. |
| fontSize | String | 16px | ❌ | Sets the font size of the text next to the toggle |
| fontWeight | Boolean | normal | ❌ | Sets the font weight of the text next to the toggle. |
| toggled | Boolean | true | ❌ | Sets the default value for the toggler. |

#### Events
When you toggle the component the component emits the toggle event. You can use the event using the example below. The value in the event is the whether the toggler is toggled or not.
`html



`

$3

The main v1 version supports Vue 3.x only, for previous versions of Vue, check the following the table.

| Vue version | vue-toggle-component version |
| ----------- | ---------------------------- |
| 2.x | 0.1.x |
| 3.x | 1.x` |

$3

#### Niels Bosman
www.github.com/niels-bosman

https://nielsbosman.dev

#### Mike van Egmond
www.github.com/mve

https://egmond.dev

$3

MIT