useAsync

You can create reactive values that depend on asynchronous calls with useAsync.

On the server, this helper will inline the result of the async call in your HTML and automatically inject them into your client code. Much like asyncData, it won't re-run these async calls client-side.

However, if the call hasn't been carried out on SSR (such as if you have navigated to the page after initial load), it returns a null ref that is filled with the result of the async call when it resolves.

The $http here has been taken from the @nuxt/http module. In order for this example to work, you need to install it (yarn add @nuxt/http/npm install @nuxt/http) and add it to your nuxt.config.js modules list.

import { defineComponent, useAsync, useContext } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    const { $http } = useContext()
    const posts = useAsync(() => $http.$get('/api/posts'))

    return { posts }
  },
})