Vue

Install

npm install @elaanio/vue

Vue 3 components and composables, with the same SSE realtime and optimistic updates as the React package.

Components

<script setup>
import { ElaanProvider, NotificationBell, NotificationFeed, Preferences } from "@elaanio/vue";
import "@elaanio/vue/styles.css";
</script>

<template>
  <ElaanProvider apiBase="https://api.elaan.io/v1" :tokenProvider="tokenProvider">
    <NotificationBell />
    <NotificationFeed />
    <Preferences />
  </ElaanProvider>
</template>

ElaanProvider supplies the client through Vue's provide/inject, so every descendant shares one inbox store and one realtime connection.

Composables

For your own UI, the composables return Vue refs that update in place:

<script setup>
import { useNotifications, useUnreadCount, usePreferences, usePush } from "@elaanio/vue";

const { notifications, markRead, markAllRead, remove } = useNotifications();
const unread = useUnreadCount();
</script>

<template>
  <span class="badge">{{ unread }}</span>
  <button v-for="n in notifications" :key="n.id" @click="markRead(n.id)">
    {{ n.title }}
  </button>
</template>

Because they are refs, they work inside computed and watch like any other reactive source.

Styling

Import @elaanio/vue/styles.css and override the --elaan-* custom properties on :root. The tokens are shared with the React and Web Components builds, so a theme written once applies everywhere. See Theming.