Nuxt.js: Understanding sub components and components and children

[Camzilla]

I'm think I'm having issues understanding how components work and need help sorting this out since the documentation is a little shortcoming.

I'm developing a multipage nuxt site and I have a bunch of components. Beside the obvious header and footer, I have other components that need to receive data from the page that the are placed on. I want to be able to handle the api calls on the components themselfs, but the page needs to deliver an id, for example.

This documentation https://nuxtjs.org/faq/async-data-components referes to

..giving the data as a prop to the subComponent

But I can't find and reference to which prop or subComponent that would be, in the documentation. Is subComponent referred to a page child? Or is it possible to send data to components so they can handle logic, instead of having lots of duplicate logic on different pages?

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

[alexchopin]

Nuxt allows you to use async data in page component to server rendered your data.
In the documentation, subComponent is maybe the wrong term to say components imported/used in your page.
So, if you want to display data in a component used in your page and be server rendered, you need to pass them through props or via slot.
Can you show us an example of a page?

[Camzilla]

Thanks @alexchopin, I didnt think to look in the vuejs documentation.. I found this https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props Which seems to be exactly what I want to do. But not sure how to apply it to nuxt.

I tried this with my page/component:

My page:

<template>
    <div>
       <mycomponent id="{{ componentId }}"/>
   </div>
</template>

<script>

import mycomponent from '~components/mycomponent.vue'

export default {
   components: {
       mycomponent: {
           props: ['id'] // ??
       }
   }
   data () {
       return { componentId: "specificid" }
   }
}

</script>

My component:

<template>
    <div>
        {{ getData(id) }}

    </div>
</template>

<script>

import apicall from 'apicall'

export default {
    data (context) {
        return apicall
    }
}

</script>

However this gives me Error: render function or template not defined in component:

[alexchopin]

Page

<template>
    <div>
       <mycomponent :result="myres"/>
   </div>
</template>

<script>
import apicall from 'apicall'
import mycomponent from '~components/mycomponent.vue'

export default {
   components: {
       mycomponent
   },
   data (context) {
       return apicall.getData(id)
       .then((res) => {
           return { myres: res.data }
       })
   }
}
</script>

Component
```html

````
I really recommend you to read the documentation of Vue, because Nuxt require a minimum of Vue knowledge.

[Camzilla]

Many thanks! Works like a charm. I'm gonna go read the vuejs docs now ;-)

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