Search code examples
vuejs2seoaccessibilityvue-router

How to set the page title in Vue 2, that will work on page load, from the component

I am trying to set the page title from the component as there are dynamic properties that will change the content of the title.

Using the examples I have found on here talk about setting the this.$route.meta.pageTitle. This only works when the page is navigated to via the application, not on a page refresh or load from bookmark.

I have tried to hook into all the lifecycle hooks, both in the router and the component, as well as adding a watcher in my root component.

How do I set the title on those load conditions?

Solution

  • In the component, you need to set the document.title rather than the route metadata.

    created () {
    this.$route.meta.title = `${myDynamicProp} - my site`
    document.title = this.$route.meta.title;
}