Nuxt•3mo ago

how do you use defineNuxtComponent asyncData()

I'm trying to make a website in nuxt that needs to load data from another place. My friend is doing the backend code and I am doing the frontend site. He wrote some code that involves useFetch() to load data from his server. It was working perfectly using the composition API, which he tested it in, but I am not very familiar with the composition API, and prefer the Options API. When trying to use the same code in an options API page, it doesn't work. I've tried it in mounted(), created(), and setup(). Looking at the nuxt Data Fetching documentation, I found that there was almost no information on how to fetch data using the options API. This is the only info: https://nuxt.com/docs/getting-started/data-fetching#options-api-support

<script>
export default defineNuxtComponent({
  /* Use the fetchKey option to provide a unique key */
  fetchKey: 'hello',
  async asyncData () {
    return {
      hello: await $fetch('/api/hello')
    }
  }
})
</script>

<script>
export default defineNuxtComponent({
  /* Use the fetchKey option to provide a unique key */
  fetchKey: 'hello',
  async asyncData () {
    return {
      hello: await $fetch('/api/hello')
    }
  }
})
</script>

The only problem is I don't understand how to use the async asyncData function. How do I use the data retrieved in there in something like mounted() or a method

8 Replies

Sloth•3mo ago

i might have found a workaround where i can send the data through my event bus nvm my event bus isn't accessible from asyncData i did it! i made a new component Data.vue and that one uses the composition API

<script setup>
    const props = defineProps(['event', 'service', 'json'])

    requestData(props.service, props.json, (e) => {
        useNuxtApp().$bus.$emit(props.event, e)
    })
</script>

<script setup>
    const props = defineProps(['event', 'service', 'json'])

    requestData(props.service, props.json, (e) => {
        useNuxtApp().$bus.$emit(props.event, e)
    })
</script>

so it emits an event using my event bus for my other components to listen to seems to only work when i listen to the event in the created() hook i seem to be unable to change any of the variables in my page's data() inside the event handler

Pisandelli•3mo ago

did you tried:

async asyncData () {
    return {
      data: {
        hello: await $fetch('/api/hello')
      }
    }
  }

async asyncData () {
    return {
      data: {
        hello: await $fetch('/api/hello')
      }
    }
  }

Pisandelli•3mo ago

Take a look if it helps: https://nuxt.com/docs/api/utils/define-nuxt-component#asyncdata

Nuxt

defineNuxtComponent · Nuxt Utils

defineNuxtComponent() is a helper function for defining type safe components with Options API.

Sloth•3mo ago

yes as mentioned above I do not understand how that works i can put the function in but I can't seem to access the data inside from any other functions in my components or pages when I try to do something like

mounted() {
  console.log(this.asyncData)
}

mounted() {
  console.log(this.asyncData)
}

i just get errors i've also tried just doing

mounted() {
  console.log(this.data.hello)
}

mounted() {
  console.log(this.data.hello)
}

Pisandelli•3mo ago

I mean... take a look if you're missing the data: 🙂

return {
      data: { // <---
        hello: await $fetch('/api/hello')
      }
    }

return {
      data: { // <---
        hello: await $fetch('/api/hello')
      }
    }

Sloth•2mo ago

yeah that seems to be working now thank you idk what i was doing wrong there

Pisandelli•2mo ago

I suggest you to give a chance to composition API... 😉

Sloth•2mo ago

im sure its fine but im running out of time to get my project done and i don't think its worth the time to relearn and rewrite everything i've done so far i've now realized that i also need to fetch data at points other than page load for example, when a user hits a button I might need to send something to my database is there any way I can use useFetch in mounted() or a method without composition api need to do more testing but it seems like $fetch may work problem solved $fetch works in options api and I made an api thing in server/api that talks to the backend so that the frontend doesn't talk directly to the back so i $fetch the api which then $fetches the backend data buttons can be pushed and then data can be loaded

Gaming

Programming

how do you use defineNuxtComponent asyncData()