Nuxt.js: Meta property from page component not added to route

[emiliobondioli]

Version

v2.8.1

Reproduction link

https://codesandbox.io/s/so1ik

Steps to reproduce

Visit the about page and check the route meta property.

What is expected ?

The meta property from the about page component should be added to the route.

What is actually happening?

The meta property on the about route is empty.

_{This bug report is available on Nuxt community (#c9321)}

[pimlie]

Where did you read that you would be able to define route.meta by defining a meta prop on the component?

This functionality doesnt seem to be mentioned in https://router.vuejs.org/guide/advanced/meta.html#route-meta-fields or https://router.vuejs.org/api/#component-enabled-options and I cant find any references in the nuxt docs either?

[emiliobondioli]

I couldn't find anything in the docs either, but from here and here the suggested solution seems to be to put the meta property in the page component.
They mostly mention this example from nuxt repo:
https://github.com/nuxt/nuxt.js/tree/2.x/examples/routes-meta

[pimlie]

It seems that that meta prop is only available from within the Nuxt context, the context docs should probably list that route and from are Vue Router route instances but are extended with the meta defined on the page component

@Atinux @pi0 Could you please clarify whether the meta prop on the page component is deprecated or undocumented functionality?

[reegodev]

@pimlie Coming in from the referenced issue. There is no official documentation about meta property on page components you are right, but when i looked for it i found this example from @Atinux https://github.com/nuxt/nuxt.js/issues/1687#issuecomment-331870619

It's pretty old, but the example still works, even though only in a middleware. It would be cool to have the page meta be merged around the whole app 😄

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[Atinux]

Hi @matteo-rigon

Indeed, the meta property is available (but undocumented yet). It is available through Nuxt context inside the middleware as an array (because we can have child pages).

You can have access in asyncData with route.meta or from.meta and in any components with this.$nuxt.$options.context.route.meta.

I am planning to update directly this.$route.meta to keep the same behaviour as vue-router but merge Page.meta option.

[Leskd]

@Atinux Hi, I want to use the meta property, I see the example https://github.com/nuxt/nuxt.js/tree/dev/examples/routes-meta.
but I write code use typescript. like this:

@Component({

})
export default class Demo extends Vue {}

I thought the meta will be add into Component Decorator, but tpyes tell me it only support

interface ComponentOptions<V extends Vue> {
    asyncData?(ctx: Context): object | undefined
    fetch?(ctx: Context): Promise<void> | void
    head?: MetaInfo | (() => MetaInfo)
    key?: string | ((to: Route) => string)
    layout?: string | ((ctx: Context) => string)
    loading?: boolean
    middleware?: Middleware | Middleware[]
    scrollToTop?: boolean
    transition?: string | Transition | ((to: Route, from: Route) => string)
    validate?(ctx: Context): Promise<boolean> | boolean
    watchQuery?: boolean | string[]
    metaInfo: MetaInfo 
  }

and metaInfo isn't work.
I hope to get your help.
thanks

[bennofs]

@Atinux what's the status of this? Meta still appears to be fairly undocumented

[Atinux]

Docs are being rewritten at the moment, will be out with Nuxt 3