how to migrate from Nuxt 2 Axios to usefetch in Nuxt3 - vue.js

Question

I am trying to migrate a small project from Nuxt2 to Nuxt3. in Nuxt2, I used axios for making API calls.
now i want to fetch in nuxt3 but Axios doesn't work here.
how to migrate this code to usefetch method in Nuxt3.
this is what i had in nuxt2
<script>
import axios from "axios";
export default {
data() {
return {
allDestinations: [],
allSubDestinations: [],
allTours: [],
form: "",
};
},
async asyncData({ route }) {
let { data: countrydata } = await axios.get(
`${process.env.backendapi}/dests/getcountry/${route.query.countryid}`
);
let { data: allDest } = await axios.get(
`${process.env.backendapi}/dests/getmaindests?limit=5000`
);
let { data: allSubDest } = await axios.get(
`${process.env.backendapi}/dests/getsubdests?limit=5000`
);
let { data: alltours } = await axios.get(
`${process.env.backendapi}/tours/gettours?limit=10000`
);
return {
form: countrydata,
allDestinations: allDest.results,
allSubDestinations: allSubDest.results,
allTours: alltours.results,
};
},
};
</script>

Answer 1

The equivalent to that in Nuxt3would be the following.
.env
NUXT_PUBLIC_TEST_URL="https://jsonplaceholder.typicode.com"
nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
runtimeConfig: {
public: {
testUrl: '', // fallback empty string, must be present tho
},
},
})
With this in any page
<template>
<section>
<div>{{ todo.title }}</div>
<div>{{ user.email }}</div>
<div>{{ photos }}</div>
</section>
</template>
<script setup>
const { testUrl } = useRuntimeConfig()
const route = useRoute() // let's suppose that `countryid` equals 1
const { data: todo } = await useFetch(`${testUrl}/todos/1`)
const { data: user } = await useFetch(`${testUrl}/users/${route.query.countryid}`)
const { data: photos } = await useFetch(`${testUrl}/photos/`)
</script>
More details regarding data fetching can be found here: https://v3.nuxtjs.org/guide/features/data-fetching
But overall, useFetch is blocking and doing what you expect.
If you cannot use script setup, you need to write it like this: https://v3.nuxtjs.org/guide/features/data-fetching#using-async-setup
Here is the documentation regarding env variables: https://v3.nuxtjs.org/guide/features/runtime-config#environment-variables