How does async data work in Nuxt.js?

How does async data work in Nuxt.js?

In Nuxt.js, async data is a special method that allows you to fetch data asynchronously before rendering a page. This is useful for ensuring that your page has all the necessary data when it loads.

Can you show me an example of using async data?

Sure! In a page component, you can define an asyncData method that returns a promise. For example:

export default {
  async asyncData({ params }) {
    const data = await fetch(`https://api.example.com/items/${params.id}`);
    return { item: await data.json() };
  }
}

What happens if the data fetch fails?

If the data fetch fails, Nuxt.js will handle the error gracefully. You can use a try-catch block in your asyncData method to manage errors and display a fallback UI.

Is asyncData only for pages?

Yes, asyncData is specifically designed for page components in Nuxt.js. For other components, you can use the mounted lifecycle hook to fetch data.