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

標籤：about   const   loaded   round   out   read   ati   and   ready   

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

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