Loading Headway as Vue Widget

headway.vue

<template>
  <div v-click-outside="hide" class="changelog">
    <div class="anchor"><!-- This is a Icon we use --></div>
  </div>
</template>


<script>
import uuid from 'uuid/v4'
import ClickOutside from 'vue-click-outside'

const HEADWAY_WIDGET_URL = '//cdn.headwayapp.co/widget.js'

export default {
  data () {
    return {
      id: uuid(),
      widget: undefined,
      config: {
        selector: '.changelog',
        account: 'accountID',
        callbacks: {
          onWidgetReady: (widget) => { this.widget = widget },
          onShowWidget: () => this.$parent.$emit('close:header-items', [this.id])
        }
      }
    }
  },

  directives: {
    ClickOutside
  },

  methods: {
    hide () {
      if (this.widget) this.widget.hide()
    }
  },

  mounted () {
    let headwayScript = document.createElement('script')
    headwayScript.async = true
    headwayScript.setAttribute('src', HEADWAY_WIDGET_URL)
    document.head.appendChild(headwayScript)

    const waitForHeadway = () => {
      if (window['Headway']) {
        window.Headway.init(this.config)
      } else {
        setTimeout(() => waitForHeadway(), 100)
      }
    }
    waitForHeadway()

    this.$parent.$on('close:header-items', ([id]) => {
      if (this.id !== id) this.hide()
    })
  }
}
</script>

I am using this example with Nuxt.

Headway initializes, and the scripts gets injected. I can also see that the headway code was added to my selector, but I can't get it to display on the page. It almost seems like it's hidden, but when I inspect the element, i can see that it is there.

@Gbahdeyboh maybe you need to include the Headway CSS? It requires some styles that were already loaded in my example if I recall correctly. Also I did not follow latest developments on the product so I don't know if something has changed according to their docs.