SteinRobert

<style scoped>
...
input:checked + .toggle {
  background-color: rgb(67, 119, 211);
  border: 2px solid rgb(67, 119, 211);
}
input:checked + .toggle:after {
  background-color: #fff;
  right: 2px;
}

SteinRobert

<style scoped>
  label {
    display: inline-block;
    width: 120px;
  }
  .toggle {
    border: 2px solid black;
    border-radius: 12px;
    display: inline-block;
    height: 16px;

SteinRobert

<template>
  <div @click="$emit('update:active', !active)">
    <label :for="id">{{ label }}</label>
    <input type="checkbox" :name="name" :id="id" :checked="active" hidden aria-hidden="true">
    <div class="toggle"></div>
  </div>
</template>

SteinRobert

<style scoped>
  label {
    display: inline-block;
    width: 120px;
  }
</style>

SteinRobert

<template>
  <div>
    <app-toggle :active.sync="toggleActive" label="Wifi"></app-toggle>
  </div>
</template>

SteinRobert

<template>
  <div @click="$emit('update:active', !active)">
    <label :for="id">{{ label }}</label>
    <input type="checkbox" :name="name" :id="id" :checked="active">
  </div>
</template>

<script>
  export default {
    name: 'Toggle',

SteinRobert

<template>
 <div @click="$emit('update:active', !active)">
   <input type="checkbox" :name="name" :id="id" :checked="active">
 </div>
</template>

SteinRobert

<template>
  <div>
    <app-toggle name="toggle" id="toggle-1" :active.sync="toggleActive"></app-toggle>
  </div>
</template>

SteinRobert

<template>
  <div>
    <app-toggle name="toggle" id="toggle-1" :active="toggleActive"></app-toggle>
  </div>
</template>
<script>
  import Toggle from './Toggle'

  export default {
    name: 'App',

SteinRobert

<template>
<div>
  <input type="checkbox" :name="name" :id="id" :checked="active">
</div>
</template>

<script>
  export default {
    name: 'Toggle',
    props: {