ArcticGizmo
This is the unofficial vue Toast/Inbox wrapper for @trycourier/courier
Installation (via npm)
npm install courier-vue-embeddedRequirements
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