How can I customize the MainHeader.vue layout in Laravel Nova without violating update principles?

Question

I want to customize the Laravel Nova source code, specifically by adding a small code block to the file vendor/laravel/nova/resources/js/layouts/MainHeader.vue.

---

look something like this:

<template>
  <div>
    <h3>Users on Pages</h3>
    <ul>
      <li v-for="(user, resourceName) in usersOnPages" :key="resourceName">
        {{ user.name }} is on {{ resourceName }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      usersOnPages: {},
    };
  },
  mounted() {
    window.Echo.channel('user-on-page')
      .listen('UserOnPage', (event) => {
        this.$set(this.usersOnPages, event.resourceName, event.user);
      });
  },
};
</script>

Which users are online and on which pages (resources) are they located?

---

While making these modifications, I'd like to understand the correct approach to pass data, for example, from an event. What would be the best practice for handling data propagation within the context of customizing Laravel Nova's layout? Additionally, how can I properly recompile the application after making changes to the layouts?

I have seen similar information; how relevant is this approach today? Doesn't it seem outdated?

• nova v. 4.27
• laravel 9.5