Courier Vue SDK

The Courier Vue SDK provides ready-made components and a programmatic composable for building notification experiences in Vue 3 applications. It includes a full-featured inbox, popup menu, toast notifications, and a composable for custom UIs.

• <CourierInbox /> — full-featured inbox for displaying and managing messages
• <CourierInboxPopupMenu /> — popup menu version of the inbox
• <CourierToast /> — toast notifications for time-sensitive alerts
• useCourier() — composable for programmatic access and custom UIs

Not using Vue? Check out the @trycourier/courier-ui-inbox and @trycourier/courier-ui-toast packages, which provide Web Components for any JavaScript project.

Installation

npm install @trycourier/courier-vue

vue (>= 3.3) is a peer dependency.

Quick Start

<script setup lang="ts">
import { onMounted } from "vue";
import { CourierInbox, useCourier } from "@trycourier/courier-vue";

const courier = useCourier();

onMounted(() => {
  // Generate a JWT for your user on your backend server
  const jwt = "your-jwt-token";

  // Authenticate the user
  courier.shared.signIn({
    userId: "your-user-id",
    jwt: jwt,
  });
});
</script>

<template>
  <CourierInbox />
</template>

EU Endpoints

If your app should talk to Courier's EU endpoints, pass the preset helper into apiUrls:

<script setup lang="ts">
import { onMounted } from "vue";
import { CourierInbox, getCourierApiUrlsForRegion, useCourier } from "@trycourier/courier-vue";

const courier = useCourier();

onMounted(() => {
  courier.shared.signIn({
    userId: "your-user-id",
    jwt: "your-jwt-token",
    apiUrls: getCourierApiUrlsForRegion("eu"),
  });
});
</script>

<template>
  <CourierInbox />
</template>

Authentication

The SDK requires a JWT (JSON Web Token) for authentication. Always generate JWTs on your backend server, never in client-side code.

1. Your client calls your backend to request a token.
2. Your backend calls the Courier Issue Token endpoint using your API key.
3. Your backend returns the JWT to your client and passes it to the SDK.

curl -X POST https://api.courier.com/auth/issue-token \
  -H 'Authorization: Bearer $YOUR_API_KEY' \
  -H 'Content-Type: application/json' \
  -d '{
    "scope": "user_id:$YOUR_USER_ID inbox:read:messages inbox:write:events",
    "expires_in": "1 day"
  }'

Documentation

Full documentation: courier.com/docs/sdk-libraries/courier-vue-web

• Inbox implementation tutorial
• JWT authentication tutorial
• Theme reference

Share feedback with Courier

Have an idea or feedback about our SDKs? Let us know!

Open an issue: Courier Web Issues