
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@leaflink/vue-notification-feed
Advanced tools
A set of components for integrating Knock in-app notifications into a Vue application.
A set of components for integrating Knock in-app notifications into a Vue application.
Note: these components are currently designed to be used in conjunction with the Knock in-app feed channel, and via Vue for web only.
npm install @leaflink/vue-notification-feed
To configure the feed you will need:
You can integrate the feed into your app as follows:
<script setup lang="ts">
import {
KnockFeedProvider,
NotificationFeedPopover,
NotificationIconButton,
} from "@leaflink/vue-notification-feed";
import { useUserStore } from "@/stores/user";
// Required CSS import, unless you're fully overriding the styles
import "@leaflink/vue-notification-feed/style.css";
const userStore = useUserStore();
</script>
<template>
<KnockFeedProvider
apiKey="{import.meta.env.VITE_KNOCK_PUBLIC_API_KEY}"
feedId="{import.meta.env.VITE_KNOCK_FEED_ID}"
userId="{userStore.id}"
>
<Dropdown close-manually>
<template #toggle="{ toggle }">
<NotificationIconButton @click="toggle" />
</template>
<template #default="{ dismiss }">
<NotificationFeedPopover @keydown.esc="dismiss" />
</template>
</Dropdown>
</KnockFeedProvider>
</template>
If you want to display notifications as a listing page rather then a popover:
<script setup lang="ts">
import {
KnockFeedProvider,
NotificationFeed,
} from "@leaflink/vue-notification-feed";
import { useUserStore } from "@/stores/user";
// Required CSS import, unless you're fully overriding the styles
import "@leaflink/vue-notification-feed/style.css";
const userStore = useUserStore();
</script>
<template>
<KnockFeedProvider
apiKey="{import.meta.env.VITE_KNOCK_PUBLIC_API_KEY}"
feedId="{import.meta.env.VITE_KNOCK_FEED_ID}"
userId="{userStore.id}"
>
<NotificationFeed />
</KnockFeedProvider>
</template>
Alternatively, if you don't want to use our components you can render the feed in a headless mode using our composables:
<script setup lang="ts">
import {
useAuthenticatedKnockClient,
useNotifications,
} from "@leaflink/vue-notification-feed";
import { useUserStore } from "@/stores/user";
const store = useUserStore();
const knockClient = useAuthenticatedKnockClient(
import.meta.env.VITE_KNOCK_PUBLIC_API_KEY,
store.id
);
const feed = useNotifications(knockClient, import.meta.env.VITE_KNOCK_FEED_ID);
const store = useFeedStore();
feed.value.on("items.received.*", (payload) => {
console.log("items.received.*", payload, payload.items);
});
feed.value.fetch();
</script>
<template>
<p>Total notifications: {{ store.metadata.total_count }}</p>
<p>Total unread: {{ store.metadata.unread_count }}</p>
<template
v-for="item in store.items"
:key="item.id"
:item="item"
:feed="feed"
>
<div v-for="block in item.blocks" v-html="block.rendered" />
</template>
</template>
In the event you can't initialize the feed synchronously (i.e. you're waiting for the user's id to be populated by an Auth0 call), you can pass refs to the composables and they will adjust accordingly.
Important:
vue-zustand
though, so you'll need to define your own refs.In this example, you can expect store.id
to be undefined to begin with and then eventually get set to the users id.
<script setup lang="ts">
import {
useAuthenticatedKnockClient,
useNotifications,
FeedItem,
FeedMetadata,
} from "@leaflink/vue-notification-feed";
import { useUserStore } from "@/stores/user";
const store = useUserStore();
const knockClient = useAuthenticatedKnockClient(
import.meta.env.VITE_KNOCK_PUBLIC_API_KEY,
store.id
);
const feed = useNotifications(knockClient, import.meta.env.VITE_KNOCK_FEED_ID);
const items = ref<FeedItem[]>([]);
const metadata = ref<FeedMetadata>({});
watch(feed, () => {
if (!feed.value) return;
feed.value.on("items.received.*", (payload) => {
items.value = payload.items;
metadata.value = payload.metadata;
});
feed.value.fetch();
});
</script>
On production environments, we have Enhanced security mode enabled. So it's necessary to provide a user auth token to knock.
[!TIP] Please follow the documentation instructions on how to generate this token.
<script setup lang="ts">
const userToken = "my-user-token";
</script>
<template>
<KnockFeedProvider [...] :user-token="userToken">
<!-- your code here -->
</KnockFeedProvider>
</template>
<script setup lang="ts">
import {
useAuthenticatedKnockClient,
useNotifications,
} from "@leaflink/vue-notification-feed";
import { useUserStore } from "@/stores/user";
const store = useUserStore();
const userToken = "my-user-token";
const knockClient = useAuthenticatedKnockClient(
import.meta.env.VITE_KNOCK_PUBLIC_API_KEY,
store.id,
userToken
);
</script>
[!WARNING] Be aware that if a knock environment doesn't have Enhanced security mode enabled, the request for that environment will fail. Make sure to provide the user token only for environments that has enhanced security enabled.
FAQs
A set of components for integrating Knock in-app notifications into a Vue application.
We found that @leaflink/vue-notification-feed demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.