/courier-vue-embedded

Primary LanguageTypeScriptMIT LicenseMIT

Courier: Your Complete Communication Stack

Version

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: 1000000;
  right: 2rem;
  top: 1rem;
}
</style>

NB: the toast component can be imported anywhere