How does Nuxt.js handle async data fetching?

How does Nuxt.js handle async data fetching?

Nuxt.js uses the asyncData method to fetch data asynchronously before rendering a page. This allows you to populate your component with data from an API or other sources.

Can you give me an example of using asyncData in a component?

Sure! In your page component, you can define an asyncData method like this:

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

What happens if the data fetching fails?

If the data fetching fails, Nuxt.js will throw an error, and you can handle it using a try-catch block within the asyncData method. You can also set a default state or redirect the user.

Is asyncData only for pages or can it be used in components too?

asyncData is specifically designed for page components in Nuxt.js. For regular components, you can use lifecycle hooks like mounted or created to fetch data.