Vue Js Toggle Switch Button Example

Hi Dev,

In this example, I will explain you how to use toggle switch button in vue js. wr will show example of toggle switch button in vue js.we will use vue-js-toggle-button npm package for bootstrap toggle button example. vue cli toggle button is a simple, pretty and customizable.

vue-js-toggle-button provide way to change label and make it default checked. you can also customize several option like value, sync, speed, color, disabled, cssColor, labels, switchColor, width, height, name and with change event.

below i will give you simple example from starch so, you can see full example use it in your app.

Step 1: Create Vue JS App

Now this step, we need to create vue cli app using bellow command:

vue create myAppSwitch

Step 2: Install vue-js-toggle-button package

below we need to install vue-js-toggle-button npm package for toggle switch.

npm install vue-js-toggle-button --save

Step 3: Use vue-js-toggle-button

In this step, We need to use vue-js-toggle-button package in main.js file of vue js app.

src/main.js

import Vue from 'vue'
import App from './App.vue'
import ToggleButton from 'vue-js-toggle-button'
  
Vue.config.productionTip = false
Vue.use(ToggleButton)
  
new Vue({
  render: h => h(App),
}).$mount('#app')

Step 4: Update App.vue File

Now this step, we need to update app.vue file, because i updated component so.

src/App.vue

<template>
  <div id="app">
    <Example></Example>
  </div>
</template>
  
<script>
import Example from './components/Example.vue'
   
export default {
  name: 'app',
  components: {
    Example
  }
}
</script>

Step 5: Create Example Component

Here, we will create Example.vue component with following

code. src/components/Example.vue

<template>
  <div class="container" style="text-align:center">
    <div class="large-12 medium-12 small-12 cell">
      <h1 style="font-family:ubuntu">Vue js toggle button example - Nicesnippets.com</h1>
  
        <toggle-button @change="onChangeEventHandler" :labels="{checked: 'On', unchecked: 'Off'}" style="margin-left: 20px" />
  
        <toggle-button :labels="{checked: 'Itsolutionstuff.com', unchecked: 'HDTuto.com'}" width="150" style="margin-left: 20px" />
  
        <toggle-button :labels="{checked: 'Yes', unchecked: 'No'}" style="margin-left: 20px" />
  
    </div>
  </div>
</template>
  
<script>
    
  export default {
    data(){
      return {
        file: ''
      }
    },
  
    methods: {
      onChangeEventHandler(){
          alert('hi');
      }
    }
  }
</script>

Now you can run vue app by using following command: