### Install Vue Toggles

Source: https://github.com/juliandreas/vue-toggles/blob/master/README.md

Installs the vue-toggles package using npm. This is the first step to using the component in your Vue 3 project.

```bash
npm i vue-toggles
```

--------------------------------

### Basic Usage with @click

Source: https://github.com/juliandreas/vue-toggles/blob/master/README.md

Shows the fundamental way to use the VueToggles component with a bound value and a click handler to toggle its state. This example uses the `@click` event to manage the `isChecked` variable.

```html
<VueToggles :value="isChecked" @click="isChecked = !isChecked" />
```

--------------------------------

### Customized Vue Toggles Component

Source: https://github.com/juliandreas/vue-toggles/blob/master/README.md

Demonstrates advanced customization of the VueToggles component using various props. This example shows how to control dimensions, colors, text content, and font styles for a personalized appearance.

```html
<VueToggles
  :value="value"
  :height="30"
  :width="90"
  checkedText="On"
  uncheckedText="Off"
  checkedBg="#b4d455"
  uncheckedBg="lightgrey"
  @click="value = !value"
/>
```

--------------------------------

### Vue Toggles Properties

Source: https://github.com/juliandreas/vue-toggles/blob/master/README.md

Provides a detailed reference for all available properties (props) for the VueToggles component. This includes their types, default values, and a description of their functionality, enabling users to customize the toggle extensively.

```APIDOC
VueToggles Properties:

value: Boolean (default: false)
  Initial state of the toggle button.

disabled: Boolean (default: false)
  Toggle does not react on mouse or keyboard events.

reverse: Boolean (default: false)
  Reverse toggle to Right to Left.

width: Number (default: 75)
  Width of the toggle in px.

height: Number (default: 25)
  Height of the toggle in px.

dotColor: String (default: '#ffffff')
  Color of the toggle dot.

dotSize: Number (default: 0)
  Dot size in px.

checkedBg: String (default: '#5850ec')
  Background color when the toggle is checked.

uncheckedBg: String (default: '#939393')
  Background color when the toggle is unchecked.

checkedTextColor: String (default: '#ffffff')
  Text color when the toggle is checked.

uncheckedTextColor: String (default: '#ffffff')
  Text color when the toggle is unchecked.

uncheckedText: String (default: '')
  Optional text when the toggle is unchecked.

checkedText: String (default: '')
  Optional text when the toggle is checked.

fontSize: Number (default: 12)
  Font size in px.

fontWeight: String (default: 'normal')
  Font weight.
```

--------------------------------

### Basic Usage with v-model

Source: https://github.com/juliandreas/vue-toggles/blob/master/README.md

Illustrates the more idiomatic Vue way to use the toggle component using the `v-model` directive for two-way data binding. This simplifies state management for the toggle's checked status.

```html
<VueToggles v-model="isChecked" />
```

--------------------------------

### Import Vue Toggles Component

Source: https://github.com/juliandreas/vue-toggles/blob/master/README.md

Demonstrates how to import the VueToggles component and its types into your Vue 3 application. This allows you to use the component in your templates and access its props.

```javascript
import { VueToggles } from "vue-toggles";
```

```javascript
import type { VueTogglesProps } from "vue-toggles";
```

```javascript
import VueToggles, { type VueTogglesProps } from "vue-toggles";
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.