A highly customizable toggle component for VueJS with SSR supports


Category: Vue.js Vue.js Form | August 9, 2021
Author: juliandreas
Official Page: Go to website
Last Update: August 9, 2021
License: MIT

toggle component for vuejs

About the toggle component:

Want to create beautiful toggles in your form? If yes, then you are at the right place. Here, we are sharing with you a component, with the help of this, you can create customizable toggle in VueJs. Its light weight in the size and easy to use.

You may also like:

How to use it?

1. In step1, you will need to install the component with npm.

npm i vue-toggles

2. Import the required component.

import Vue from 'vue';
import VueToggles from 'vue-toggles';

// FOR SSR import (Nuxt for example)
import Vue from 'vue';
import VueToggles from 'vue-toggles/dist/vue-toggles.ssr';
import 'vue-toggles/dist/vue-toggles.ssr.css';

3. Then register the toggle component like this:

Vue.component('VueToggles', VueToggles);

4. And finally, add the VueToggles component in your template, where you want to show the toggle.

<VueToggles :value="value" @click="value = !value" />

Browser compatibility

  • Chrome: 40+
  • Firefox: 25+
  • Safari: 10+
  • IE: 11+