You can define async functions that run once and persist the data on client-side.

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.

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

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

    return { posts }

At the moment, useAsync is only suitable for one-offs, unless you provide your own unique key. More information.

Edit this page on GitHub Updated at Mon, Apr 12, 2021