Nuxt.js: Pass props to nuxt component (or page)

[leon-wbr]

Hi,

I can't figure out how to cleanly update my header's title and subtitle, I did it with the store, but that seems overly complicated and doesn't work well with i18n, etc. So I wanted to try two-way binding, but it seems that you can't pass props from the layout.

Is it impossible or am I missing something?

_{This question is available on Nuxt.js community (#c1337)}

[jsonberry]

@leon-wbr Hey! Can you share some code examples please? I'm sure we can figure something out, but I'm not 100% sure what you're trying to accomplish yet.

[lehni]

I believe I am facing the same problem. 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?

[leon-wbr]

<template>
  <section class="Container" :class="$store.state.pageClass">
    <Header :title="title"></Header>
    <nuxt :title.sync="title" />
  </section>
</template>

<style lang="scss">
.Container {
  padding: 50px 10%;

  @media (max-width: 800px) {
    padding: 50px 5%;
  }
}
</style>

<script>
import Header from '~/components/Header.vue'

export default {
  components: {
    Header
  },
  data: () => ({
    title: 'Leon Weber'
  })
}
</script>

I'm trying to get this to work, but it seems the nuxt component won't accept any props by default. I want it to be two-way binded to the page, so on page load I can change the title to an i18n string. Currently doing it with the state but that isn't so simple with i18n.

[hackuun]

I have the same issue. I can't pass props from layout to Page Component?

[treejanitor]

I'm not sure this is necessarily helpful, but at least it gives the base example on how to get props into a component. Maybe someone stumbles on this issue has a simpler flow problem.

Issue #297

[alexchopin]

You can't pass props through <nuxt> component.
In this case, you should extract this logic into the store.

[Coletrane]

Bringing this back up. I'd like to be able to pass params to routes. I have a simple blog static site and am not using Vuex since the app has essentially no state. I think they key to Nuxt adoption is it supports all features vanilla Vue does.

[geerpm]

works for me.

1. nuxt.config.js

module.exports = {
  // Router
  router: {
    extendRoutes(routes) {
      // Automatically map all route params to component props:
      const appendPassProps = function(rs) {
        for (const route of rs) {
          route.props = /:/.test(route.path)
          if (route.children) {
            appendPassProps(route.children)
          }
        }
      }
      appendPassProps(routes)
      return routes
    },
  },
  build: {
    templates: [
      {
        src: `${__dirname}/modules/template/router.js`,
        dst: 'router.js',
      },
    ],
  }
}

1. save a below file to ~/modules/template/

2. https://github.com/nuxt/nuxt.js/blob/master/lib/app/router.js

3. edit adding props

14c14,15
<     res += tab + '\tcomponent: ' + route._name
---
>     res += tab + '\tcomponent: ' + route._name + ',\n'
>     res += tab + '\tprops: ' + route.props

[lehni]

@alexchopin have a look at @geerpm's proposal above. It looks simple enough. Could adding this be reconsidered?

[skyrpex]

I would love this feature, too!

[FEA5T]

Was considering adopting nuxt vs default vue-ssr and then I find out:

You can't pass route props to nuxt components?! This should be a top priority to be added...

[qm3ster]

@FEA5T To be crystal clear:
You want props passed to the <nuxt> component to be proxied and passed on to the currently inserted page component as individual named props?

[FEA5T]

    var router = new VueRouter({
        mode: 'history',
        scrollBehavior (to, from, savedPosition) {
            if (savedPosition) return savedPosition;
            else    return { x: 0, y: 0 };
        },
        routes: [
            { path: '/', component: home },
            { path: '/search', component: search, props: { searchIndex: searchIndex },
            { path: '*', redirect: '/' }
        ]
    });

I want the equivalent of this.

[qm3ster]

Well, where would searchIndex come from?
Have you tried passing props to the <nuxt> component in the layout?
because a month ago, this was quietly introduced:
https://github.com/nuxt/nuxt.js/blob/78494dac927681007ea6725b4548db8fd838ed16/lib/app/components/nuxt.js#L21

[itsacorn]

Sorry for reopening a closed issue. I've tried passing props to the nuxt component in layouts, and sadly noticed that they do not get passed to the route. Instead, they get resolved to HTML attributes. After some debugging, i found out this.$props in the nuxt component does not contain any of the passed props. Could you maybe explain how youre supposed to pass props? The :prop="value" system seems to not work... The nuxt component has following props: ['nuxtChildKey', 'keepAlive'], and any props which are not in that list simply get ignored... I did try to use Vuex but ill be honest... its too complicated for me.

[pbastowski]

@qm3ster

To pass all props from the parent directly to the child, the parent should use $attrs not $props, as $props will only hold those props explicitly declared in the parent, in this case

props: ['nuxtChildKey', 'keepAlive'],

Perhaps the line that passes the props to the child should read

props: { ...this.$attrs, ...this.$props }

However, I haven’t tested this yet.

In template driven components I pass on any and all props simply by binding to the $attrs prop, for example:

<input v-bind=“$attrs” v-on=“$listeners” />

[TheGitPanda]

Have you tried passing props to the component in the layout?
because a month ago, this was quietly introduced:

So theoretically if I were to write <nuxt :basket-count="1" />, my pages/index.vue would be able to receive the prop basket-count? Because I've tried this and it does not work as @itsacorn describes.

I'm a little confused on this thread because there doesn't seem to be a working solution and the ticket is closed again.

[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.