[useAsyncData] Component is already mounted, please use $fetch instead. See

async function handleComplete(e) {
    const data = await useAsyncData('sign-in', () => {
      const x = $fetch('/api/auth/sign-in', {
        method: 'POST',
        body: {
          pin: e.join(''),
        },
      });

      return x;
    });

    console.log(data);
  }

async function handleComplete(e) {
    const data = await useAsyncData('sign-in', () => {
      const x = $fetch('/api/auth/sign-in', {
        method: 'POST',
        body: {
          pin: e.join(''),
        },
      });

      return x;
    });

    console.log(data);
  }

Why do I have component already mounted?

I want to use useAsyncData, to get the status to see if it is pending or success to render a loading state, how can I?

I've use useAsyncData in my composables that I directly call in my setup, do I have to make my own loading and use $fetch directly since useAsyncData needs to be call in the setup?

Thanks!

Nuxt•2y ago•

2 replies

[useAsyncData] Component is already mounted, please use $fetch instead. See

async function handleComplete(e) {
    const data = await useAsyncData('sign-in', () => {
      const x = $fetch('/api/auth/sign-in', {
        method: 'POST',
        body: {
          pin: e.join(''),
        },
      });

      return x;
    });

    console.log(data);
  }

async function handleComplete(e) {
    const data = await useAsyncData('sign-in', () => {
      const x = $fetch('/api/auth/sign-in', {
        method: 'POST',
        body: {
          pin: e.join(''),
        },
      });

      return x;
    });

    console.log(data);
  }

[useAsyncData] Component is already mounted, please use $fetch instead. See

Similar Threads

[useAsyncData] Component is already mounted, please use $fetch instead. See

Similar Threads

Similar Threads

Similar Threads