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.

useFetch should be used with refs and not ssrRefs because state serialization and hydration is already covered by useFetch. Else, the state would be sent from server to client "twice", via the ssrRef and via useFetch

$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.

onGlobalSetup

reqRef, reqSsrRef