Building an in-app notification feed with Nuxt, Vue, and Knock
In this video, we’ll look at how to build an entirely custom in-app feed experience inspired by Notion using Knock’s JavaScript client and real-time feed API. The example app is built using Nuxt.js and shadcn/ui, and you can find it on our GitHub here: https://github.com/knocklabs/nuxt-fee...
We’ll cover creating an in-app channel and workflow in Knock, using the client to fetch a user’s feed, how to manage message statues like ‘read’ and ‘archived,’ and then we’ll explore a few touches that make Notion’s feed experience so great.
Knock quick start
https://docs.knock.app/getting-starte...
JavaScript client quick start
https://docs.knock.app/sdks/javascrip...
Message statuses
https://docs.knock.app/send-notificat...
In-app channel
https://docs.knock.app/integrations/i...
00:00 - Introduction
00:36 - Project setup
02:19 - Knock config & env vars
03:13 - Project structure
04:53 - Knock client configuration
07:06 - Feed logic
13:03 - UI implementation
19:05 - Update message statuses
26:25 - Fetch next page
27:39 - Feed UI details
28:00 - Wrapping up
