Tag

A simple vue tag.

GitHub

Demo

Sizes

SmallMediumLarge

Variants

ClassicSurfaceSoft

Colors

PrimarySuccessDangerWarningIndigoCyan

High Contrast

Indigo (High Contrast)Cyan (High Contrast)Orange (High Contrast)

Disabled

Disabled (Off)Disabled (On)

Custom Color

TealGreenOrangeLemon

🛠 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.js

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