Cambiar el título en Vuejs 2 de forma dinámica

Vamos a ver lo sencillo que es cambiar el título en Vuejs 2, en nuestro caso lo vamos a hacer utilizando el caso más típico, haciendo uso del router de Vuejs.

Para ello nos vamos a aprovechar del objeto meta que solemos utilizar en el sistema de rutas, ya que es un objeto y podemos pasarle los datos que necesitemos, vamos a pasarle también un título de la siguiente forma.

{
  path: '/posts/:id',
  name: 'post',
  component: Posts,
  meta: { Auth: false, title: 'Listado de posts' }
},

Si te fijas, dentro de meta estamos pasando un título, para que sea utilizado en cada cambio de ruta, simplemente debemos utilizar beforeEach en nuestras rutas y establecerlo.

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

A partir de ahora, cada vez que hagas un cambio de ruta, el título de tu app será actualizado y todo estará funcionando como esperabas.