Toggle Button UI component in VueJS 3

https://www.npmjs.com/package/vue3-toggle

Toggle is a lightweight switch or toggle button library that is easy to customize and dynamic in a sense that it provides two types of buttons.

Pills (By Default)

Flat buttons

Installation

Use the npm package manager

npm install vue3-toggle

Usage

In main.js

import “vue3-toggle”

In your vue file add code snippet

HTML

<Toggle v-model=”toggle” :options=”options” title=”Toggle Title” @input=”input” @selected=”selected” />

Data

data() {
  return {
    toggle: “true”,
    options: [
      {
        label: “Yes”,
        value: “true”,
        data: { name: “John”, age: “13” }
      },
      {
        label: “No”,
        value: “false”,
        data: { name: “Amanda”, age: “30” }
      },
    ],
  };
},

Props

- disable (can be true or false)

- tabs (can be true or false)

- title (is a string to show a title on top of toggle button group)

- options (object as shown in data)

Events

- input(event)

- selected(event)

Let me know in comments if you want any other option to be added in this component