Get Async Data in Nuxt.js Component - asynchronous

Question

Code snippets are written in Pug and Coffeescript
I know about asyncData and it limitations, but what the best practice to get async data from component in Nuxt.js ?
I write some logic in my page, but it's obviously not acceptable since I have cards more than two.
asyncData: ->
axios.defaults.baseURL = 'https://api.github.com/repos/username'
{ data: repo1 } = await axios '/repo1'
{ data: repo4 } = await axios '/repo4'
{ data: repo8 } = await axios '/repo8'
{ data: repo18 } = await axios '/repo18'
{
repo1:
stargazers: repo1.stargazers_count
description: repo1.description
url: repo1.html_url
repo4:
stargazers: repo4.stargazers_count
description: repo4.description
url: repo4.html_url
repo8:
stargazers: repo8.stargazers_count
description: repo8.description
url: repo8.html_url
repo18:
stargazers: repo18.stargazers_count
description: repo18.description
url: repo18.html_url
}
CardSlot(
title='repo1'
:subtitle='repo1.description'
:titleLink='repo1.url'
)
h1 {{repo1.stargazers}}
CardSlot(
title='repo4'
:subtitle='repo4.description'
:titleLink='repo4.url'
)
h1 {{repo4.stargazers}}
CardSlot(
title='repo8'
:subtitle='repo8.description'
:titleLink='repo8.url'
)
h1 {{repo8.stargazers}}
CardSlot(
title='repo18'
:subtitle='repo18.description'
:titleLink='repo18.url'
)
h1 {{repo18.stargazers}}
I want to write only:
CardSlot(
title='repo1'
)
CardSlot(
title='repo4'
)
CardSlot(
title='repo8'
)
CardSlot(
title='repo18'
)
and inside CardSlot component all data magic will happen
add #3: Final push!
so now all I need — is to pass it to the props\slots somehow
in terms of asyncData
asyncData: ({ params }) ->
axios.defaults.baseURL = 'https://api.github.com/repos/username'
repo = 'repo22'
res = await axios('/' + repo)
{
stargazers: res.data.stargazers_count
description: res.data.description
url: res.data.html_url
}
...
h1 {{description}}
I guess I need to define an array, so therefore data can be fetched in a loop, before page loads, and after to pass it somehow to the cards slots

Answer 1

I don't understand your questions !
please could you reformulated it.
but if you want to get many data in one request you could do this =>
export default {
async asyncData ({ params }) {
let users = await axios.get(`https://api/users/`)
let friends = await axios.get(`https://my-api/friends`)
return {
users: users.data
friends: friends.data
}
}
}
according to the docs https://nuxtjs.org/guide/async-data
Thanks !

Answer 2

Disclaimer: No PUG nor Cofeescript :)
Can you make your component dynamic? Inside pages/ create a page called _repo.vue
Now this repo component will have a property in $route.params.repo.
So your asyncData looks like:
asyncData({route}) {
const data = await axios `https://api.github.com/repos/username/${route.params.repo}`
return data
}
That should work.

Answer 3

asyncData just confused me, so I ended up in wrong place, trying to solve unnecessary problems, I realized now — it is completely not suitable for my purposes, so I rework it with plain old vue'ish created function:
<template lang="pug">
.div(
:created="axiSync"
)
h3 asyComp2
h1 {{statusText}}
h1 {{status}}
h3 {{stargazersCount}}
h3 {{description}}
h3 {{htmlUrl}}
h3 {{ratelimit}}
</template>
<script lang="coffee">
import axios from 'axios'
export default
props: ['repo']
data: ->
statusText: ''
status: ''
stargazersCount: ''
description: ''
htmlUrl: ''
ratelimit: ''
url: 'https://api.github.com/repos/userName/'
methods:
axiSync: ->
response = await axios.get(#url + #repo)
#statusText = response.statusText
#status = response.status
#stargazersCount = response.data.stargazers_count
#description = response.data.description
#htmlUrl = response.data.html_url
#ratelimit = response.headers['x-ratelimit-remaining']
</script>
...
asyComp2(
repo = 'niceAndDandy'
)
Thank you to everyone! ^_^