To enable dynamic page titles, I've implemented the following routing mechanism:
{
path: '/home',
meta: { title : 'Welcome Back, ' + profile.userName + ' – Dashboard | A Company' },
name: 'home',
component: () => import('@/views/Home.vue'),
},
Although I have set up the titles for each page, they do not appear when running the application. To rectify this, I added the following code snippet to **Vue.app**
:
watch: {
'$route' (to, from) {
document.title = to.meta.title || 'A Company'
}
},
Now, the titles load properly. However, the page is unable to fetch the profile.username
once the API call is completed.
Is there a way to update the title dynamically after receiving data from the API?