Question

195

How to use the @nuxtjs/axios module with Nuxt3?

rated 0 times [ 200] [ 5] / answers: 1 / hits: 6540 / 1 Year ago, sun, december 4, 2022, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaley

Add To Favorites

Follow

Total Points: 141

Total Questions: 109

Total Answers: 109

Location: Burundi

Member since Sat, Aug 21, 2021

3 Years ago

kaley questions

1 Display content related to only those button it is clicked in HTML

Mon, Jul 4, 22, 00:00, 2 Years ago

1 .map usage in an object

Thu, Feb 17, 22, 00:00, 2 Years ago

1 JSON.parse(): SyntaxError: Unexpected token � in JSON at position 0

Fri, Jul 23, 21, 00:00, 3 Years ago

1 React Testing Library does not find elements using getAllByTestId after initial render

Tue, Jul 20, 21, 00:00, 3 Years ago

1 timeout() operator not working in pipe Rxjs subject

Tue, Aug 18, 20, 00:00, 4 Years ago

View All

answered 2 Years ago karladaijahf · Accepted Answer

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 }} 👉 {{ user.name }}</p>

  </div>

</template>





<script>

definePageMeta({

  layout: "products"

})



export default {

  data () {

    return {

      users: '',

    }

  },

  async mounted() {

    this.users = await $fetch('https://jsonplaceholder.typicode.com/users')

  },

}

</script>

This is how it looks at the end (with a successful HTTP request in the network tab)

As a confirmation, we can see that the module is indeed not supported (and will not be) by Nuxt3 on the modules page.

The Suspense error is detailed in the official documentation

<Suspense> is an experimental feature. It is not guaranteed to reach stable status and the API may change before it does.

It may seem scary but you can totally use the API as per se and since it's a warning and not an error, it's totally fine!