@hitrever/courier-vue-embedded v4.4.1

This is the unofficial vue Toast/Inbox wrapper for @trycourier/courier

Installation (via npm)

npm install courier-vue-embedded

Requirements

You will need to get a Courier API key to get started. You can sign up and create one for free at courier.com.

Getting Started

Configuration

At run time, configure Courier and listen to messages for a user

import { Courier } from 'courier-vue-embedded';

Courier.init({
  clientKey: '{{your_client_key}}',
  userId: '{{user_id}}'
});

Ignore Custom Components (Vue 2.7)

When using this component with Vue 2.7 you might get warnings similar to

[vue warn]: Unknown custom element: <courier-toast> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

To resolve this in your main file add

import Vue from 'vue'
Vue.config.ignoredElements.push(
  "courier-inbox",
  "courier-preferences",
  "courier-toast"
);

Import Components

Import the Inbox/Toast components and you are ready to go. Here we are importing it in src/App.vue

<template>
  <div id="app">
    <CourierToastVue />
    <CourierInboxVue />
  </div>
</template>

<script setup lang="ts">
  import { CourierToastVue, CourierInboxVue } from 'courier-vue-embedded';
</script>

<style scoped>
  /* If you would like to have a right-floating inbox */
  courier-inbox {
    position: fixed;
    z-index: 1000;
    right: 2rem;
    top: 1rem;
  }
</style>

NB: the toast component can be imported anywhere

Versions

To maintain some semblance of reason, here is how courier-vue-embedded versions map to courier component versions

(*patch version may differ if there are any bugs found within this wrapper package)