<template>
  <div id="app">
    <h1>Connecting to wonderpush</h1>
    <WonderPush v-bind="options">
      <!-- YOUR APP HERE -->
    </WonderPush>
  </div>
</template>

<script>
import {WonderPush} from 'vue-wonderpush'
export default {
  name: 'App',
  components : {
    WonderPush,
  },
  data: function(){
    return {
      options: {
        webKey: "YOUR KEY HERE",
      }
    }
  }
}
</script>

<template>
  <div className="switch-container">
    <div id="wonderpush-subscription-switch" data-on="YES" data-off="NO"></div>
  </div>
</template>

<script>
  export default {
    name: 'SwitchButton',
  }
</script>

import Wonderpush from 'vue-wonderpush';
<template>
  <div 
      v-bind:class= "['event', 'myEvent']"
      v-on:click="fireEvent()"
    > 
    Click this div to track "myEvent"
  </div>
</template>

<script>
  export default {
    props: [
      "wonderPush"
    ],
    methods: {
      fireEvent: function(){
        this.$props.wonderPush.trackEvent(this.$props.event)
      }
    }
  }
</script>

<template>
  <EventToTrack/>
</template>

<script>
  import EventToTrack from './EventToTrack'
  import {withWonderPush} from 'vue-wonderpush'

  export default {
    name : 'ParentOfEventToTrack',
    components: { EventToTrack: withWonderPush(EventToTrack, {waitWonderPushReady: true}) }
  }
</script>