[Vuejs]-How to add Dynamic Title to application – VueJS

by

3👍

Is it possible to change the title once the API returns the data?

Yes, but I don’t know all of your code so I can’t write exactly something you can just copy and paste, but you can adjust it until it works.

The main change would be to make meta.title a function

{
  path: '/home',
  meta: {
    title: async function() {
      var userName = await getUsernameFromWhereverYoureGettingItFrom()
      return `Welcome Back, ${username} – Dashboard | A Company`
    }
  },
  name: 'home',
  component: () =>
    import ('@/views/Home.vue'),
},

Then call that function

watch: {
    '$route': async (to, from) {
        document.title = to.meta.title ? await to.meta.title() : 'A Company'
    }
},
👤George

Leave a comment