Can you rerender parts of a persistent layout?

[amiranagram]

First of all, I love the persistent layout feature and I don't wanna remove it.

The scenario: I have unread notifications in shared data and a notification dropdown in a persistent layout. When I click on any link inside the notification dropdown I send and additional ?read_notification=notification_id. On the back-end side, I have a middleware that checks for the existence of read_notification param in URL query string and tries to find that notification and mark it as read.

After the successful response the unread notifications are updated in shared data, but is there a way I could rerender that part of the layout as well? It stays the same until unless I go to a page with a different layout and than go back or I hit refresh.

[hotmeteor]

One possible solution would be to add a global event listener like:

import { createApp, ref } from '@inertiajs/inertia'
import { Inertia } from '@inertiajs/inertia'

const app = createApp(/*...*/);

app.config.globalProperties.notification_count = ref(0)

Inertia.on('success', (event) => {
    this.notification_count = event.detail.page.props.notification_count
})

And then in your Layout.vue file you just make sure you're referencing the count as a computed value or something.

It does seem like it should just update though.

[claudiodekker]

Hi,

The Inertia Way™ to do this, is to simply share the list of (unread) notifications on every single request (you can cache them server-side if needed, as to not continuously re-query the database).

Then, as you mark a notification as read (by making an Inertia visit when clicking the 'mark as read' button), the database updates the notification, and the request redirects you back to the page you were already on.

Because the 'source' and 'target' pages are the same / use the same Page Component, Inertia will essentially only update the page's props, which should now be a fresh notification list, without the notification we just marked as read.

Then, through Vue's reactive re-rendering 'magic', the read notification will disappear from your (shared) layout, especially if you're accessing it using the $page helper (which is recommended within shared layouts). To make things extra fancy, you can even wrap your notifications in a transition to make them fade or slide out of the screen, just like 'real' notifications!

Hope this helps!

[amiranagram]

Thanks, I'll try it out and get back to you.

[hxdev]

It's kind of late but if all the notifications are read from the Shared Data ($page in Vue and userPage() in React) then you just can simply call router.reload after the user clicks on the Notification (and mark as read), at this time Inertia will refresh the SharedData and since $page and usePage() are reactive so the Notification will be marked as read everywhere else.