Nuxt•4mo ago

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?

3 Replies

Sloth•4mo ago

idk if this made any sense but im really frustrated right now

owljackob•4mo ago

Why do you have to use Options API since you tested it first with Composition API?

Sloth•4mo ago

My friend did that part because he's doing the backend database stuff and I'm doing the frontend

Gaming

Programming

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