Vue Simple Switch

🎚 A simple vue switch component. Toggle switch alternative to the checkbox.

A light weight vue plugin built from the ground up

📺 Live Demo

Demo: Link

🛠 Install

npm i @vuesimple/vs-switch

🚀 Usage

<template>
  <vs-switch v-model="isEnabled" />
</template>

<script>
  import VsSwitch from '@vuesimple/vs-switch';

  export default {
    components: {
      VsSwitch,
    },
    data() {
      return {
        isEnabled: false,
      };
    },
  };
</script>

🌎 CDN

<script src="https://unpkg.com/@vuesimple/vs-switch@<version>/dist/index.min.js"></script>

// Main/Entry file
app.use(VsSwitch.plugin);

<template>
  <vs-switch v-model="isEnabled" />
</template>

Nuxt Code Snippet

After installation,

• Create a file /plugins/vs-switch.js

  import Vue from 'vue';
  import VsSwitch from '@vuesimple/vs-switch';
  
  Vue.component('vs-switch', VsSwitch);

• Update nuxt.config.js

  module.exports = {
    ...
    plugins: [
      { src: '~plugins/vs-switch', mode: 'client' }
      ...
    ]
  }

• In the page/ component

  <template>
    <vs-switch v-model="isEnabled" />
  </template>

Note

• For older Nuxt versions, use <no-ssr>...</no-ssr> tag.
• You can also do import VsSwitch from '@vuesimple/vs-switch' & add in component:{VsSwitch} and use it within component, without globally installing in plugin folder.

⚙ Props

| Name | Type | Default | Description | | -------------- | ------- | --------- | ----------------------------------------------------------- | | modelValue | Boolean | false | The checked state (supports v-model) | | size | String | medium | Size of switch. (small, medium, large) | | variant | String | classic | Visual variant. (classic, surface, soft) | | color | String | primary | Color theme of the switch when checked | | highContrast | Boolean | false | High contrast mode for better visibility | | radius | String | full | Border radius. (none, small, medium, large, full) | | disabled | Boolean | false | Disable the switch | | ariaLabel | String | - | Aria label for accessibility | | checkedBgColor | String | - | Custom background color when checked (hex/rgb/text color) |

🔥 Events

| Name | Description | | ------- | ---------------------------------------------- | | v-model | Emitted when the switch state changes | | change | Emitted when the switch state changes (detail) |

📎 Slots

Currently, the switch component does not have slots. It renders as a simple toggle button.

🎨 Color Options

The switch supports various color themes when checked:

• primary (default blue)
• success (green)
• danger (red)
• warning (orange)
• secondary (dark gray)
• indigo
• cyan
• orange
• crimson
• gray

📝 Examples

Basic Switch

<vs-switch v-model="isEnabled" />

Switch with Label

<label>
  <vs-switch v-model="isEnabled" />
  Enable notifications
</label>

Different Sizes

<vs-switch v-model="isEnabled" size="small" />
<vs-switch v-model="isEnabled" size="medium" />
<vs-switch v-model="isEnabled" size="large" />

Different Variants

<vs-switch v-model="isEnabled" variant="classic" />
<vs-switch v-model="isEnabled" variant="surface" />
<vs-switch v-model="isEnabled" variant="soft" />

Different Colors

<vs-switch v-model="isEnabled" color="primary" />
<vs-switch v-model="isEnabled" color="success" />
<vs-switch v-model="isEnabled" color="danger" />
<vs-switch v-model="isEnabled" color="indigo" />

Disabled State

<vs-switch v-model="isEnabled" disabled />

High Contrast

<vs-switch v-model="isEnabled" highContrast color="indigo" />

Custom Color for Checked State

<vs-switch v-model="isEnabled" checkedBgColor="#ff6b6b" />

🔔 Events Handling

<template>
  <vs-switch v-model="isEnabled" @change="handleChange" />
</template>

<script>
  export default {
    data() {
      return {
        isEnabled: false,
      };
    },
    methods: {
      handleChange(newValue) {
        console.log('Switch is now:', newValue);
      },
    },
  };
</script>

License

MIT