how to change page favicon + title with Vue router

Question

Im looking for a way to change the tab icon + title with vue / vue-router.

when i'm in the home page i want the company’s logo favicon and title, and on the other page different favicon + title.

how can I do that?

i tried to had meta: {title: 'company name'} to the router, but it doesn’t work.

Answer 1

In addition to adding the 'meta' tag, you have to create a method that recieves the data inside this tag and apply the needed modifications.

1. Add the 'meta' tag, like you just did above, but also add 'icon' property to it.

   {
    path: "/login",
    name: "Login",
    component: LoginComponent,
    meta: {
      title: "Login",
      icon:"/lock.png" 
    }
   }
   

2. Go to your main *.vue file into which the various components will be routed through. This file is the one which has the element inside of it. In it, add a $route watcher in the scripts section of the file:

   watch: {
     $route(to) {
        document.title = `APPLICATION_NAME - ${to.meta.title}`;
        const link = document.querySelector("[rel='icon']")
        link.setAttribute('href',to.meta.icon)
     }
   }
   

Replace APPLICATION_NAME with your app name and you are good to go.

The code is self-explanatory. It is just basic DOM manipulation.