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.

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

Installation

Installing the package

# install with yarn
yarn add vue-toggle-component

# install with npm
npm install vue-toggle-component --save

Usage

Example

<template>
  <vue-toggle title="Toggle me" name="vue-toggle"/>
</template>

<script>
import VueToggle from 'vue-toggle-component';

export default {
  name: 'App',
  components: { VueToggle },
}
</script>

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.

<template>
  <VueToggle title="Toggle me" name="VueToggle" @toggle="doSomething"/>
</template>

<script>
import VueToggle from "vue-toggle-component";

export default {
  name: 'App',
  components: {
    VueToggle
  },
  methods: {
    doSomething(value) {
      // value = true || false.
    }
  },
}
</script>

Vue version support

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

Authors

Niels Bosman

www.github.com/niels-bosman

https://nielsbosman.dev

Mike van Egmond

www.github.com/mve

https://egmond.dev

License

MIT