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}}'
});

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

| courier-vue-embedded | courier components | | -------------------- | ------------------ | | 1.X | 3.Y | | 4.Y.Z* | 4.Y.Z |

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

Vue 2.7 support

• with the recent EOL of vue 2.x support has been dropped since with the last supported version being v4.5.0