How to get route meta and all route meta on the component in Nuxtjs?

Issue

My project package.json

"dependencies": {     
  "core-js": "^3.15.1",
  "nuxt": "^2.15.7",
  "nuxt-property-decorator": "^2.9.1",     
}

My pages directory

- pages
  - a.vue
  - b.vue

Page component

// a.vue
<template>    
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component({   
  meta: {
    title: 'PageA'      
  },
})
export default class extends Vue {
  public mounted() {
    // ignored... see the below
  }
}
</script>
 
// b.vue
<template>    
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component({   
  meta: {
    title: 'PageB'      
  },
})
export default class extends Vue {}
</script>

In a.vue I want to get the route meta and all route meta.

• For the route meta.

public mounted() {          
    console.log(this.$route.meta);
    console.log(this.$nuxt.$options.context.route.meta);
    console.log(this.$nuxt.context.route.meta);
     
    // {}
    // [{{title: "PageA"}}]
    // [{{title: "PageA"}}]
}

• For all routes meta.

public mounted() {        
    console.log(this.$router.getRoutes().map((r) => r.meta));
    console.log(this.$router.options.routes?.map((r) => r.meta));
    console.log(this.$nuxt.$router.getRoutes().map(r => r.meta));
     
    // [{},{}]
    // [undefined, undefined]
    // [{},{}]
}

My question:

About geting route meta

• Why the this.$route.meta is empty ? I can use the $route.meta in the vue cli project to get route meta. Is this a bug in nuxtjs ?
• What's the difference between this.$nuxt.$options.context.route.meta and this.$nuxt.context.route.meta ?

About geting all routes meta

• What is correct way to get the all routes meta in nuxtjs ?

Solution

Finally, I found the solution. Use @nuxtjs/router-extras to set the router meta and everything work fine.

Page component

// a.vue
<template></template>
<router lang="js">
  {
    meta: {
      title: 'PageA'
    }
  }
</router>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component
export default class extends Vue {
  public mounted() {
    // ignored... see the below
  }
}
</script>

// b.vue
<template></template>
<router lang="js">
  {
    meta: {
      title: 'PageB'
    }
  }
</router>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component
export default class extends Vue {}
</script>

In a.vue get the current route meta and all route meta.

  public mounted() {
    console.log(this.$route.meta)
    console.log(this.$nuxt.$options.context.route.meta)
    console.log(this.$nuxt.context.route.meta)  
    // {title: "PageA"}
    // [{{title: "PageA"}}]
    // [{{title: "PageA"}}]
    
    console.log(this.$router.getRoutes().map((r) => r.meta))
    console.log(this.$router.options.routes?.map((r) => r.meta))
    console.log(this.$nuxt.$router.getRoutes().map((r) => r.meta))  
    // [{title: "PageA"},{title: "PageB"}]
    // [{title: "PageA"},{title: "PageB"}]
    // [{title: "PageA"},{title: "PageB"}]
  }

Answered By - Changemyminds