title: Get Async Data in Nuxt.js Component
body: <blockquote>
    <p>Code snippets are written in Pug and Coffeescript</p>
  </blockquote>
  
  <hr>
  
  <p>I know about asyncData and it limitations, but what the best practice to get async data from component in Nuxt.js ?</p>
  
  <p>I write some logic in my page, but it's obviously not acceptable since I have cards more than two.</p>
  
  <pre><code>asyncData: -&gt;
      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
      }
  </code></pre>
  
  <pre><code>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}}
  </code></pre>
  
  <p>I want to write only:</p>
  
  <pre><code>CardSlot(
        title='repo1'
  )
  CardSlot(
        title='repo4'
  )
  CardSlot(
        title='repo8'
  )
  CardSlot(
        title='repo18'
  )
  </code></pre>
  
  <p>and inside CardSlot component all data magic will happen</p>
  
  <hr>
  
  <h2>add #3: Final push!</h2>
  
  <p>so now all I need — is to pass it to the props\slots somehow 
  in terms of <code>asyncData</code></p>
  
  <pre><code>asyncData: ({ params }) -&gt;
      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}}
  
  </code></pre>
  
  <p>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</p>