1

I want to change my page title according to the links I follow, just like how every page on stack overflow all have different page title with different links, some page titles are binded with the question title, how can such be done with vuejs, this will be good for search engine optimization, etc. I'm loving vuejs but I dont understand this part, is there something I'm missing?

Paul Caleb
  • 177
  • 1
  • 4
  • 12
  • Are you doing client side navigation (ie using VueRouter)? – Bert Aug 02 '17 at 14:34
  • 1
    I am using vue-meta for doing this, works well https://github.com/declandewet/vue-meta – jeerbl Aug 02 '17 at 15:29
  • Are you using SSR? I see laravel in the tags, yet this seems to be a pure vuejs question – Antony Aug 02 '17 at 16:41
  • @Antony I think he just put all his stack. – TheBAST Nov 18 '17 at 05:38
  • If you want your title to be reactive, have a look at [How can I bind the html content in vuejs?](https://stackoverflow.com/questions/36612847/how-can-i-bind-the-html-title-content-in-vuejs). – str Mar 02 '18 at 12:30

2 Answers2

14

If you are using vue-router, you can do this using beforeEach:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const Router = new VueRouter({
    routes: [
        {
            path: '/path',
            component: Component,
            meta: { title: 'My Page Title' }
        }
    ]
})

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

    next()
});
Nitesh Chauhan
  • 341
  • 2
  • 6
  • The title content is change. But if I right-click on the website and select View Page Source, I see the title, description and keywords is don't change – moses toh Jul 05 '20 at 02:55
0

In case someone is using Vue webpack template (vue init webpack projectname):

You need to paste Global Guard in "src/main.js", right before new Vue:

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

new Vue({})

You can read more about Guards here: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-guards

Alexander Kim
  • 17,304
  • 23
  • 100
  • 157
  • The title content is change. But if I right-click on the website and select View Page Source, I see the title, description and keywords is don't change – moses toh Jul 05 '20 at 02:55