vue3-toggle-button

Vue 3 Toggle Button

For use with Vue 3, TypeScript and the Composition API. Feedback welcome.

Usage

Install via NPM

npm install vue3-toggle-button

Then require in your project:

import { Vue3ToggleButton } from 'vue3-toggle-button'
import '../node_modules/vue3-toggle-button/dist/style.css'

Then use it

<Vue3ToggleButton v-model:isActive="isActive" :handleColor="'#cc00cc'"> </Vue3ToggleButton>

Properties

See App.vue for a sample. There is also a folder called local-example with a stand alone example.

<script setup lang="ts">
import { ref } from 'vue'
import Vue3ToggleButton from './components/Vue3ToggleButton.vue'

const isActive = ref(true);

function toggle(value :boolean) {
  isActive.value = !isActive.value;
}
</script>

<template>

  <Vue3ToggleButton v-model:isActive="isActive" :handleColor="'#cc00cc'"> </Vue3ToggleButton>
  <p  @on-change="toggle">Value:  {{isActive}}</p>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>


This is a Vue 3 version of [vue-toggle-btn](https://www.npmjs.com/package/vue-toggle-btn)
Some code was based on work by [Max Leiter](https://maxleiter.com/)