AppBar in nested Layout

I’m using Inertia JS using Vue and nested Layouts.

My main layout looks something like this:

	<template>
	  <div>
	    <app-bar title="App title" type="back|dismiss|sidebar">
	      <!-- Slot for icons in the top right corner -->
	    </app-bar>
	    <slot />
	  </div>
	</template>

So, an AppBar component accepting a title, a link with a back icon, dismiss icon or sidebar icon, and a slot (optionally) to provide icon links relevant to the current page.

<script>

  import Layout from '@/Pages/Messenger/Layout';

  export default {
    metaInfo: { title: 'Report new problem' },
    layout: [Layout],
    ...
    
</script>

This is a Page that is nested in the Layout.

So my question is: what is the best/preferred way to control the props and slot of the AppBar from nested Pages?

A bit like as you would do using Blade templates in Laravel or as Vue Meta does for the document page title as seen in the example above.

Maybe this is not even the best approach, in that case also let me know :slight_smile: