Vue Js Toggle Switch Button Tutorial

When “Vue Js Toggle Switch Button Tutorial” moves through design, development and browser testing, the official example can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official Vue website before adopting it in production.

Hi Guys,

Today, I will learn 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:

npm run serve

It will help you....