The fetch Method

Nuxt >= 2.12

Nuxt.js v2.12 introduces a new hook called fetch in any of your Vue components.

fetch(context) has been deprecated, instead you can use an anonymous middleware in your page: middleware(context)

When to use fetch?

Every time you need to get asynchronous data. fetch is called on server-side when rendering the route, and on client-side when navigating.

It exposes $fetchState at the component level:

  • $fetchState.pending: Boolean, allows you to display a placeholder when fetch is being called on client-side.
  • $fetchState.error: null or Error, allows you to display an error message
  • $fetchState.timestamp: Integer, is a timestamp of the last fetch, useful for caching with keep-alive

If you want to call the fetch hook from your template use:

<button @click="$fetch">Refresh</button>

or component method:

// from component methods in script section
export default {
  methods: {
    refresh() {
      this.$fetch()
    }
  }
}

You can access the Nuxt context within the fetch hook using this.$nuxt.context.

Options

  • fetchOnServer: Boolean or Function (default: true), call fetch() when server-rendering the page
  • fetchDelay: Integer (default: 200), set the minimum executing time in milliseconds (to avoid quick flashes)
When `fetchOnServer` is falsy (`false` or returns `false`), `fetch` will be called only on client-side and `$fetchState.pending` will return `true` when server-rendering the component.
<script>
  export default {
    data() {
      return {
        posts: []
      }
    },
    async fetch() {
      this.posts = await this.$http.$get(
        'https://jsonplaceholder.typicode.com/posts'
      )
    },
    fetchOnServer: false
  }
</script>

Contributors

잘못된 부분이 있거나 이 문서에 기여하고 싶으신가요? GitHub에서 이 페이지를 수정해주세요!