how to change document.title in vue-router?

[dengyaolong]

I really want set title when I declare routes. e.g

const routes = [{ path: '/search', component: ActivityList, title: 'Search' }]

then title will change by the vue-router.

how ?

ps, I see the pull issue closed. why?
#526

[fnlctrl]

Hi, thanks for filling this issue. You can simply define title in route's meta, and use a router.beforeEach hook to set title

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

The author of the PR closed it himself, so we don't know why. But setting title is trivially easy to implement with current API.

[kkinder]

This seems like it would cover it, but what if the title should be dynamic, based on the content of the loaded component?

[dengyaolong]

I change the title in created hook for dynamic title

[marines]

Does the dynamic title persist in the browser's history? @dengyaolong

[RodrigoAngeloValentini]

{
path: '',
component: Home,
name: 'home',
meta: {title: 'Home'}
}

@fnlctrl Setting the title to a static value seems easy using 'meta'.
However, @kkinder has a point - I see no way of accessing the matched component instance in the beforeEach or afterEach hooks.

I guess I could just set document.title manually in the component, but that seems like a workaround. Is there a hook that can access the matched component?

[Baloche]

It is possible if you define the title attribute as a function :

{
  meta: { title: route => { /* return custom title based on route, store or anything */ } }
}

and

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

[yTakkar]

I've got a solution and used it on one of my projects.

First create a directive.

Vue.directive('title', {
  inserted: (el, binding) => document.title = binding.value,
  update: (el, binding) => document.title = binding.value
})

Then use that directive on the router-view component.

Suppose, we are working on 'MyComponent.vue' file.

<router-view v-title="title" ></router-view>

export default {
  data(){
    return {
      title: 'This will be the title'
    }
  }
}

This works even if the component is updated or the page is reloaded.

[aocneanu]

@yTakkar nice solution.

You can also give the title as a value for the directive like this:

<router-view v-title="My Title" ></router-view>

and then in the directive definition:

Vue.directive('title', {
  inserted: (el,binding) => document.title = binding.value,
  update: (el,binding) => document.title = binding.value
})

But unfortunately couldn't make it work when I have nested routes.

Did you find a solution for this? Or maybe you don't have in your project nested routes.

[yTakkar]

@aocneanu I updated the answer!!
I've used Nested routes, look at these files.

1. router file.
2. Usage of some routes.

[aocneanu]

@yTakkar

1st, this scenario worked for me too, but try to add another component in the upper level and switch between that component and a child of notes.

2nd, I'm not sure that your use of (multiple times for multiple components) is correct. In my app I have a single component for all the components from one level.

3rd, this approach has a problem because for every component update the document title will be updated as well, even if it's not necessary. I know it's not a big thing but I don't like when my code does redundant stuff. Try add a console.log in the directive and see how many hits it gets, even if you don't switch the page.

4th, I ended using the router.beforeEach() method and it works seamlessly.

[dv336699]

I've just come across the same thing and found vue-meta.

[maggiew61]

combinging @fnlctrl and @RodrigoAngeloValentini 's solutions solved my problems. thanks

[troxler]

I created a component to do that from the view. It is similar to yTakkar's solution but more complete in that you also can set the description, keywords, language and some other things (mostly useful when doing server-side rendering). It is called vue-headful and you can use it as follows:

Install

npm i vue-headful

Usage

Register the component:

import Vue from 'vue';
import vueHeadful from 'vue-headful';

Vue.component('vue-headful', vueHeadful);

And then use the vue-headful component in every of your views:

<vue-headful
    title="Title from vue-headful"
    description="Description from vue-headful"
/>

Every attribute is also reactive, see vue-headful for more information. vue-headful is based on Headful, a vanilla JavaScript library to set document title and meta tags with JavaScript.