Dynamically changing page title using meta attribute of vue router and changing master.vue with some layout tweaks

Step 01: To change page title (title tag) with changing navigation we need to add meta attribute inside routes variable like below for issues list and issue create inside resources/js/routes/index.js

const routes = [ 
    { path: '/', name: 'issues.list', component: IssuesIndex, meta: { title:  'Issues List' }  },
    { path: '/create-issues', name: 'issues.create', component: IssuesCreate, meta: { title:  'Issues Create' } },
] 

Step 02: Adding beforeChange() method of vue router object to change page title dynamically taking attribute value from title of meta attribute

const router = createRouter({ 
    history: createWebHistory(),
    routes
}) 

router.beforeEach((to, from, next) => {
    document.title = to.meta.title;
    next();
});

export default router;

Step 03: back in master.vue component we are changing the navbar navigation links from dark background to light background like below

<template>
      <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
        <div class="container">
          <!-- Navbar text-->
          <span class="navbar-text">                      
            {{ logoTitle }}
          </span>
          <ul class="navbar-nav">
            <li class="nav-item" active-class="active">
              <router-link :to="{ name: 'issues.list' }" class="nav-link" href="#">Issues</router-link>
            </li>
            <li class="nav-item" active-class="active">
              <router-link :to="{ name: 'issues.create' }" class="nav-link" href="#">Issues Create</router-link>
            </li>
          </ul>
        </div>
        </nav>   
        <div class="app-body">
        <main class="main">
            <div style="padding-top: 20px" class="container" >               
                  <router-view></router-view>
            </div>
        </main>
    </div>
</template>

<script setup>
import { computed } from 'vue';
 
const logoTitle = computed(() => 'Issue Tracking Site')
</script>