Nuxt.js: Support Passing Props to Route Components

[lehni]

I've been trying to get this feature of vue-router to work with Nuxt.js:

https://router.vuejs.org/en/essentials/passing-props.html

By default, the produced routes don't offer a way to set the props property.

So I've added this to my nuxt.config.js:

router: {
  extendRoutes(routes, resolve) {
    // Automatically map all route params to component props:
    for (const route of routes) {
      route.props = /:/.test(route.path)
    }
  }
}

But without any luck; The props don't seem to get passed through to my page components from the router params. What am I missing?

_{This feature request is available on Nuxt.js community (#c1420)}

[lehni]

I should have searched first. This is probably the same request as #1502

[lehni]

Hmm, I believe the other issue is about a different problem, so I am reopening again.

How can I provide a simple online test-case for Nuxt.js? Is there some scafolding I can use to provide one, e.g. on http://jsfiddle.net/ as people do for Vue.js and vue-router?

[kgriffs]

+1 I'm building a CMS based on Nuxt and I'd like to be able to pass static props (object mode) to the page. This would be more straightforward vs. passing a payload and then having to shuttle the object along via asyncData. The other nice thing about props is that a type can be defined for them, as well as a flag determining whether or not they are required. The CMS can use these properties to inform the way these props are presented in the UI.

[hackuun]

hacktoberfest :smile:
I have the same question.

[alexchopin]

https://github.com/nuxt-community/router-module

[Xiphe]

I find this solution not sustainable. I'd really like to keep the existing pages folder routing but also be able to pass custom props to the route.

[xkjyeah]

I worked on #3198 where I allowed components to define a routeToProps function.

I then realized that the same functionality could be achieved with asyncData.

For example, if you had:

routes: [{
  name: 'test',
  props: (route) => ({ id: route.params.id })
}]

You could just write:

async asyncData(ctx) {
  return {id: ctx.params.id}
}

[Xiphe]

Seems as if nuxt@2 solves this issue. route.meta data is being json-encoded and passed to the .nuxt/routes.js

ref https://github.com/nuxt/nuxt.js/blob/b022d21bd3df08870171727eab9ad89dc1f9944f/lib/app/router.js#L13

These are not props but can easily be used by the route component and external helpers

[highalps]

it will be resolve after release nuxt 2.0?
i need this feature :)

[xkjyeah]

@highalps What are the features of props you need that you cannot achieve with asyncData?

[Xiphe]

@xkjyeah asyncData is a feature for nuxt users. But as a nuxt-plugin developer I might want to attach meta-data to routes without interfering with the asyncData hook of the component that is rendered by the route.

[highalps]

@xkjyeah it can be done with asyncData... but check params in every asyncData hook is unnecessary.

as @Xiphe said, yes.. i need more clear way :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.