useFetch

You can access the Nuxt fetch() hook within the composition API.

Versions of Nuxt newer than v2.12 support a custom hook called fetch that allows server-side and client-side asynchronous data-fetching.

You can access this with this package as follows:

import { defineComponent, ref, useFetch } from '@nuxtjs/composition-api'
import axios from 'axios'

export default defineComponent({
  setup() {
    const name = ref('')

    const { fetch, fetchState } = useFetch(async () => {
      name.value = await axios.get('https://myapi.com/name')
    })

    // Manually trigger a refetch
    fetch()

    // Access fetch error, pending and timestamp
    fetchState

    return { name }
  },
})

useFetch must be called synchronously within setup(). Any changes made to component data - that is, to properties returned from setup() - will be sent to the client and directly loaded. Other side-effects of useFetch hook will not be persisted.

$fetch and $fetchState will already be defined on the instance - so no need to return fetch or fetchState from setup.

Note that useFetch doesn't support use within onGlobalSetup.

Edit this page on GitHub Updated at Tue, Mar 2, 2021