Cache data in Nuxt client-side

up Nuxt ⚐

• Nuxt 3.8 - Client-side caching with getCachedData ✨
• Mastering Prose Components in Nuxt Content

// Grab and cache the Nuxt Content document this links to
const nuxtApp = useNuxtApp();
const { data: metadata } = await useAsyncData(
  pathname.value,
  () => queryContent(pathname.value).findOne(),
  {
    dedupe: 'defer',
    getCachedData(key) {
      return (
        nuxtApp.static.data[key] ||
        nuxtApp.payload.data[key]
      );
    },
  }
);

If getCachedData returns a nullish value, it refetches. Otherwise it returns the cached data. This means that data can be cached across the lifetime of the application.

You can add a “time to expire” by adding a date in the transform function, and then checking against that date.