Vue Toggle Switch Component ON-OFF

Today, We want to share with you Vue Toggle Switch Component ON-OFF.In this post we will show you vue cli toggle button, hear for Vue Toggle Switch Button Component ON-OFF Switch we will give you demo and example for implement.In this post, we will learn about How to create a reusable toggle switch component with Vue.js with an example.

Vue Toggle Switch Component ON-OFF

There are the Following The simple About Vue Toggle Switch Component ON-OFF Full Information With Example and source code.

Read Also:  What are OTP Frauds?

As I will cover this Post with live Working example to develop bootstrap vue toggle switch, so the vue bootstrap toggle button for this example is following below.

Vue js toggle switch button example

Vue.js Toggle Switch Button Component ON-OFF Switch

Step 1: Html Source Code

  <div id="root">
    <Toggle v-model="checked"/>

Step 2: vuejs Part

Vue.component('Toggle', {
  template: `
    <span class="toggle-wrapper" @click="toggle" role="checkbox" :aria-checked="value.toString()" tabindex="0""toggle">
      <span class="toggle-background" :style="bgstyles"></span>
      <span class="toggle-indicator" :style="dynamicCustomStyles"></span>
  props: ['value'],
  methods: {
    toggle() {
      this.$emit('input', !this.value)
  computed: {
    bgstyles() {
      return {
      	backgroundColor: this.value ? '#3490dc' : '#dae1e7'
    dynamicCustomStyles() {
      return { transform: this.value ? 'translateX(2rem)' : 'translateX(0)' }

new Vue({
	data: {
  	checked: true,

step 3: Css Part

* { box-sizing: border-box }

#root {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #fff;
  padding: 2rem;

.toggle-wrapper {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 2rem;
  width: 4rem;
  border-radius: 9999px;
.toggle-wrapper:focus {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(52,144,220,.5);

.toggle-background {
  display: inline-block;
  border-radius: 9999px;
  height: 100%;
  width: 100%;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color .2s ease;

.toggle-indicator {
  position: absolute;
  top: .25rem;
  left: .25rem;
  height: 1.5rem;
  width: 1.5rem;
  background-color: #fff;
  border-radius: 9999px;
  box-shadow:  0 2px 4px rgba(0,0,0,0.1);
  transition: transform .2s ease;

Web Programming Tutorials Example with Demo

Read :

Read Also:  Vuejs tree view Components And Modules - Vue Tree View Component


You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Vue Toggle Switch Component ON-OFF.
I would like to have feedback on my blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Laravel 5 – Remove Public from URL
  2. Read Also:  VueJS nested child, template, inner template, components
  3. Read Also:  html5 range slider with 2 handles using jQuery
  4. Read Also:  Get last inserted record ID mySQL using PHP
  5. Read Also:  VueJS Add active class li onClick navigation menu item
  6. Read Also:  Toggle Switch Button in VueJs Example
  7. Read Also:  Vuejs Double Click to inline editing vue Grid Component
  8. Read Also:  failed to load resource: the server responded with a status of 404 (not found)
  9. Read Also:  cURL POST header parameters file json request
  10. Read Also:  Load web pages iframe using jQuery Example