announcekitapp/announcekit-vue

Use AnnounceKit widgets in your VueJS App

The easiest way to use AnnounceKit widgets in your VueJS App.

Visit https://announcekit.app to get started with AnnounceKit. CodeSandbox Demo

Documentation

Installation

yarn add announcekit-vue

Usage

<template>
    <nav>
      <ul>
        <li>
          <a href="/home">Home</a>
        </li>
        <li>
          <a href="/product">Product</a>
        </li>
        <li>
            <AnnounceKit
                widget="https://announcekit.app/widgets/v2/31nbbO"
                :user="optional_UserData"
                :data='optional_SegmentationData' />
        </li>
      </ul>
    </nav>
</template>

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

Props

Common props you may want to specify include:

• widget - The url of the widget. You can obtain it while creating or editing widget in AnnounceKit Dashboard.
• style - You can apply CSS rules to modify / tune the position of the widget.
• floatWidget - Set true if the widget is a Float widget.
• embedWidget - Set true if the widget is a Embed widget.
• boosters - In case you don't want to boosters appear on the page the widget is placed.
• user - User properties (for user tracking)
• data - Segmentation data
• lang - Language selector
• 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.

API

You can use ref property to access the widget instance and call control functions

• open()
• close()
• unread()
• instance()

<template>
  <a @click="() => this.$refs.ankRef.open()">What's New</a>
    <AnnounceKit ref="ankRef" widget="https://announcekit.co/widgets/v2/2nI0Ok" />
</template>

<script>
import AnnounceKit from "announcekit-vue";
...
</script>

announcekit-vue's Issues

Missing declaration file for the announcekit-vue module

The declaration files will be useful for integrating your VueJS plugin in apps using Typescript :-D

Version 3.1.0 is broken

When building my app after moving to announcekit-vue 3.1.0 from 2.3.0, I get a build error:

X [ERROR] Could not read from file: C:\Users\turbo\source\repos\test\vue-2-project\vue\dist\vue.runtime.esm.js

    node_modules/announcekit-vue/dist/announcekit.es.js:1:56:
      1 │ import { nextTick, openBlock, createElementBlock } from "vue";
        ╵                                                         ~~~~~

C:\Users\turbo\source\repos\test\vue-2-project\node_modules\esbuild\lib\main.js:1575
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
node_modules/announcekit-vue/dist/announcekit.es.js:1:56: ERROR: Could not read from file: C:\Users\turbo\source\repos\test\vue-2-project\vue\dist\vue.runtime.esm.js
    at failureErrorWithLog (C:\Users\turbo\source\repos\test\vue-2-project\node_modules\esbuild\lib\main.js:1575:15)
    at C:\Users\turbo\source\repos\test\vue-2-project\node_modules\esbuild\lib\main.js:1033:28
    at runOnEndCallbacks (C:\Users\turbo\source\repos\test\vue-2-project\node_modules\esbuild\lib\main.js:1447:61)
    at buildResponseToResult (C:\Users\turbo\source\repos\test\vue-2-project\node_modules\esbuild\lib\main.js:1031:7)
    at C:\Users\turbo\source\repos\test\vue-2-project\node_modules\esbuild\lib\main.js:1143:14
    at responseCallbacks.<computed> (C:\Users\turbo\source\repos\test\vue-2-project\node_modules\esbuild\lib\main.js:680:9)
    at handleIncomingPacket (C:\Users\turbo\source\repos\test\vue-2-project\node_modules\esbuild\lib\main.js:735:9)
    at Socket.readFromStdout (C:\Users\turbo\source\repos\test\vue-2-project\node_modules\esbuild\lib\main.js:656:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12) {
  errors: [
    {
      detail: undefined,
      id: \'\',
      location: {
        column: 56,
        file: \'node_modules/announcekit-vue/dist/announcekit.es.js\',
        length: 5,
        line: 1,
        lineText: \'import { nextTick, openBlock, createElementBlock } from "vue";\',
        namespace: \'\',
        suggestion: \'\'
      },
      notes: [],
      pluginName: \'\',
      text: \'Could not read from file: C:\\Users\\turbo\\source\\repos\\test\\vue-2-project\\vue\\dist\\vue.runtime.esm.js\'
    }
  ],
  warnings: []
}

Node.js v18.12.1

After downgrading to 2.3.0 it works fine.

I tested this with Vue 2 (on Vite), with a new project built from running npm init vue@2 .

Doesn't work in IE

It's working fine in firefox and Chrome, but my project stopped working in IE after using it.

Vue 3 Support

I tried migrating an existing codebase to Vue 3 and I'm seeing a bunch of errors. My guess is that Vue 3 isn't supported, but I don't see any existing discussion around this.