VueJS Component

Dealing with externally loaded libraries in Javascript apps is a little bit tricky. Firstly, you need to manually load the script, wait until it’s loaded, get the library variable, etc. You can also include the <script> in your main HTML file, but this technique is not quite a good solution.

Knowing all these boring stuff, we have created a VueJS component, which can help you to include AnnounceKit Widget into your app.

Step 1

Firstly, we install the component from NPM
npm install --save announcekit-vue

Step 2

Before adding component to our VueJS App, we need to get ID of the widget that we want to include into our app. You can find it in JavaScript widget config code, as widget key. In this case it is https://announcekit.app/widget/adyGk.

Step 3

As we have our widget ID, it is the time to include the component into our VueJS app.

<template>
<nav>
  <ul>
    <li>
      <a href="/home">Home</a>
    </li>
    <li>
      <a href="/product">Product</a>
    </li>
    <li>
      <a href="#" class="ak-trigger">News
        <AnnounceKit catchClick=".ak-trigger" widget="https://announcekit.app/widget/adyGk"/>
      </a>
    </li>
  </ul>
</nav>
</template>

<script>
import AnnounceKit from "announcekit-vue";
export default {
  name: "App",
  components: {
    AnnounceKit
  }
};
</script>

As you see, we set catchClick property on the component. This will listen for click event on the specified element. click on that element will trigger the widget to open. This property is not mandatory, but most will be used with Badge and Line widgets.
That’s all!

Here is the properties list that component accepts. Some of them are very useful.

Property Description
widget The ID of the widget.
style Apply CSS rules to modify / fine-tune the position of the widget.
catchClick Element selector to catch clicks and trigger opening the widget.
floatWidget Set true if the widget is a Float widget.
userData User properties (for user tracking)
onWidgetOpen Called when the widget is opened.
onWidgetClose Called when the widget is closed.
onWidgetResize Called when the widget is resized.
onWidgetUnread Called when unread post count of widget has been updated.

Please follow our Github repo for further updates.
Resources: