[Vue] Preload Data using Promises with Vue.js and Nuxt.js

Posted 2020-08-22 Answer1215

Nuxt.js allows you to return a Promise from your data function so that you can asynchronously resolve data before displaying the page. This allows the server to fetch the data and render the page once it‘s ready.

 

<template>
  <section class="container">
    <img src="~static/logo.png" alt="Nuxt.js Logo" />
    <ul>
      <li v-for="person in people">{{person.name}}</li>
    </ul>
  </section>
</template>

<style scoped>
.title
{
  margin: 50px 0;
}
</style>

<script>

import axios from ‘axios‘
const api = `https://swapi-json-server-nvaxelgbew.now.sh/people`

  export default {
    data(){
      return axios.get(api).then((res) => ({
        people: res.data
      }))
    }
  }
</script>

 

When first loading the page, you won‘t see ui do the api call. Becuase the data is already fetched in the server. If you navigate around ‘about‘ & ‘home‘ page, u will see the api is called, becasue than it is loaded from clienet