I have this code to get API data from /

<template>
<div>


</div>
</template>


  <script>  
  definePageMeta({
    layout: "products"
  })

export default {
  data () {
    return {
      data: '',
    }
  },
  async fetch() {
    const res = await this.$axios.get('/')
    console.log(res.data)
  },
}
</script>

I have installed axios and in nuxt.config.ts I have:

// 
export default defineNuxtConfig({

    app: {
        head: {
            title: 'Nuxt',
            meta: [
                { name: 'description', content: 'Everything about - Nuxt-3'}
            ],
            link: [
                {rel: 'stylesheet', href: '+Icons' }
            ]
        }
    },
    runtimeConfig: {
        currencyKey: process.env.CURRENCY_API_KEY
    },
    modules: [
        "@nuxtjs/tailwindcss",
    ],
    buildModules: [
        "@nuxtjs/axios"
    ],
    axios: {
      baseURL: '/',
    }
})

I have the following in my console

is an experimental feature and its API will likely change.

I am not getting API data in the console.

I have this code to get API data from https://fakestoreapi.com/products/

<template>
<div>


</div>
</template>


  <script>  
  definePageMeta({
    layout: "products"
  })

export default {
  data () {
    return {
      data: '',
    }
  },
  async fetch() {
    const res = await this.$axios.get('https://fakestoreapi.com/products/')
    console.log(res.data)
  },
}
</script>

I have installed axios and in nuxt.config.ts I have:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({

    app: {
        head: {
            title: 'Nuxt',
            meta: [
                { name: 'description', content: 'Everything about - Nuxt-3'}
            ],
            link: [
                {rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
            ]
        }
    },
    runtimeConfig: {
        currencyKey: process.env.CURRENCY_API_KEY
    },
    modules: [
        "@nuxtjs/tailwindcss",
    ],
    buildModules: [
        "@nuxtjs/axios"
    ],
    axios: {
      baseURL: '/',
    }
})

I have the following in my console

is an experimental feature and its API will likely change.

I am not getting API data in the console.

• javascript
• vue.js
• axios
• nuxt.js
• nuxt3.js

• Build Modules are deprecated as far as I know, move it to regular modules section. Also, the suspense thing is a warning should not cause any error so far. Set the value to your data state and check your Vue devtools to see if something is wrong. Otherwise, please provide a minimal reproducible example or a public Github repo. – kissu Commented Dec 4, 2022 at 16:26
• @kissu github.com/AzizxonZufarov/newsnuxt/blob/main/pages/products/… Please visit github repo – Azizxon Zufarov Commented Dec 4, 2022 at 16:37

2 Answers 2

As told on this page, we don't use the @nuxtjs/axios module anymore with Nuxt3 but rather ohmyfetch, which is now baked-in directly in the core of the framework through $axios as writted here.

Hence, your config file should look like this

export default defineNuxtConfig({
  app: {
    head: {
      title: 'Nuxt Dojo',
      meta: [
        { name: 'description', content: 'Everything about - Nuxt-3' }
      ],
      link: [
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
      ]
    }
  },
  runtimeConfig: {
    currencyKey: process.env.CURRENCY_API_KEY
  },
  modules: [
    "@nuxtjs/tailwindcss"
  ],
})

And the given /pages/products/index.vue can be like that

<template>
  <div>
    <p v-for="user in users" :key="user.id">ID: {{ user.id }}