Sloth Posts - Answer Overflow

Sloth

•Created by Sloth on 7/8/2024 in #❓・help

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

30 replies

NNuxt

•Created by Sloth on 7/6/2024 in #❓・help

how do you use useFetch() in a page (options api)

hello, I am working on a website in nuxt that needs to load data from somewhere else. I got that part working in a way that i liked it and made a util to try to make it easier. it worked perfectly in my little testing page that used the vue composition api, but i cannot get it working anywhere else where i use the options api. I don't know the composition api well and would prefer to not relearn everything for this. here is the util that i'm using:

export default async function requestData(service, json, onResponseFunction) {
    json.service = service
    const { data } = await useFetch('http://192.168.0.11:8002/example', {
        headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(json),
        method: "POST",
        lazy: false,
        server: true,
        onResponse({ request, response, options }) {
            console.log("here")
            onResponseFunction(response._data)
            console.log(response._data)
        }
    })
    return data
}

export default async function requestData(service, json, onResponseFunction) {
    json.service = service
    const { data } = await useFetch('http://192.168.0.11:8002/example', {
        headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(json),
        method: "POST",
        lazy: false,
        server: true,
        onResponse({ request, response, options }) {
            console.log("here")
            onResponseFunction(response._data)
            console.log(response._data)
        }
    })
    return data
}

here is the page where it works:

<template>
    <div>
      <pre>{{ data }}</pre>
    </div>
</template>

<script setup>
    let data
    await requestData("KitGet", {}, function(e) {
      data = e
    })
</script>

<template>
    <div>
      <pre>{{ data }}</pre>
    </div>
</template>

<script setup>
    let data
    await requestData("KitGet", {}, function(e) {
      data = e
    })
</script>

is there any way to do this in the options api?

4 replies

NNuxt

•Created by Sloth on 6/29/2024 in #❓・help

weird issue with my components not lining up

8 replies

Gaming

Programming