How to get page title in watch:$route for Nuxt/Vue

Question

Nuxt/Vue based app receives in watch:$route as well as in this.$route name, path, but never meta. E.g. I have a page Foo with

export default {
    ...
    head(){
        return{
            title: 'Foo'
        }
    },
    meta: {
        title: 'Foo'
    }
}

In the layout

export default {

    created() {    
        console.log( this.$route );
    }

    watch:{
        $route ({ path, name, meta }){
            console.log( meta );
        }
    }
}

Yet, it's available in middleware

export default function ({ store, route }) {
    console.log( route );
}

I can populate store from middleware and rely on it in the app, but it's doesn't look as a good solution to me.

Is there any decent way to receive page (route) meta with Router events? Actually what I need is page title on internal (SPA) navigation events.

Is there still no answer to this? I tried some other things but it seems too much for just setting a page title... — JustDevelop

Pavel Levin Pavel Levin · Accepted Answer · 2020-11-26T16:00:57

Nuxt has a plugin called vue-meta which comes installed by default. It's an HTML Metadata manager for Vue.js.

Read the guide because using it can be very helpful and allows you to follow best practices regarding HTML meta, like current page title, but basically you can use something like:

// in the layout root component, use a computed like this to display the page title:
export default {
  computed: {
    title(ctx) {
      return ctx.$root.$meta().refresh().metaInfo.titleChunk
    },
  }
}
// in each page component, set the page title, using `vue-meta` conventions:
export default {
  head() {
    return {
      title: 'Dashboard',
    }
  },
}

How to get page title in watch:$route for Nuxt/Vue

1 Answers