Nuxt Headway

Integrate Headway into your Nuxt app ✌️

Live demo

Setup

1. Install nuxt-headway

npm i nuxt-headway # or yarn add nuxt-headway

2. Add it to your buildModules and set your Headway account ID

// nuxt.config.js
{
  buildModules: ['nuxt-headway'],

  headway: {
    account: '<your-account-id>'
  }
}

3. Add the directive v-headway to the node that will contain the widget

<!-- components/your-component.vue -->
<template>
  <div v-headway></div>
</template>

Configure

Set all the options you would set in HW_config into headway in you nuxt.config.js.

See the configuration official docs.

You don't need to change selector and trigger. Use the directives instead.

Usage

Anywhere in your app components, you can access this.$headway.

The original window.Headway object is accessible in this.$headway.sync.

Async safe

As the Headway script may load after your app renders, you need to be careful when interacting with the front-end API.

There are 2 ways of safely using it:

Promise API

$headway.onReady.then(() => {})

// in your component scope
this.$headway.onReady.then(() => {
  this.$headway.sync.toggle();
});

Push API

$headway.push('method', 'arg1', 'arg2', ...)

// in your component scope
this.$headway.push('toggle');

Directives

v-headway

The node that will contain the widget. Related to selector in the config.

<template>
  <div v-headway>
    <!-- The widget will be injected here -->
  </div>
</template>

v-headway-target

The node(s) that will trigger the widget. Related to trigger in the config.

<template>
  <!-- Clicking on this will open the widget -->
  <div v-headway-target></div>
</template>

Bugs

Found a bug? You can open an issue or feel free to submit a PR.

Disclaimer

This is a community package. I'm not affiliated with Headway or Nuxt.