[FIXED] how to migrate from Nuxt 2 Axios to usefetch in Nuxt3

Issue

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>

Solution

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

Answered By - kissu

Answer Checked By - Mary Flores (PHPFixing Volunteer)