Guide on integrating the @nuxtjs/axios plugin with Nuxt3

Question

Guide on integrating the @nuxtjs/axios plugin with Nuxt3

I'm trying to fetch API data from using this code:

<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 axios installed and in my nuxt.config.ts file, I added:

// 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: '/',
    }
})

When I check my console, I see the following message:

is an experimental feature and its API will likely change.

However, I am not seeing any API data being logged in the console. What could be the issue?

javascript vue.js axios nuxt.js nuxtjs3

Answer 1

Answer №1

According to the information provided here, the @nuxtjs/axios module is no longer used with Nuxt3. Instead, it has been replaced by ohmyfetch, which is now integrated directly into the framework's core as $axios as explained here.

Therefore, your configuration file should be structured 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"
  ],
})

The code for the /pages/products/index.vue page can be structured as follows:

<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>

The end result will look something like this (with a successful HTTP request shown in the network tab):

https://i.sstatic.net/11pPf.png

It is confirmed that the module is not supported (and will not be) in Nuxt3, as stated on the modules page.

More information on the Suspense error can be found in the official documentation:

<Suspense> is an experimental feature. It is subject to change before reaching stable status.

Although it may sound intimidating, you can still utilize the API without any issues since it is just a warning and not an error!

Answer 2

According to the information provided here, the @nuxtjs/axios module is no longer used with Nuxt3. Instead, it has been replaced by ohmyfetch, which is now integrated directly into the framework's core as $axios as explained here.

Therefore, your configuration file should be structured 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"
  ],
})

The code for the /pages/products/index.vue page can be structured as follows:

<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>

The end result will look something like this (with a successful HTTP request shown in the network tab):

https://i.sstatic.net/11pPf.png

It is confirmed that the module is not supported (and will not be) in Nuxt3, as stated on the modules page.

More information on the Suspense error can be found in the official documentation:

<Suspense> is an experimental feature. It is subject to change before reaching stable status.

Although it may sound intimidating, you can still utilize the API without any issues since it is just a warning and not an error!

Answer 3

Answer №2

When working with nuxtjs3, I find it beneficial to utilize a composable as it offers flexibility and can be easily imported throughout the application.

composables/useApi.ts

import axios from 'axios'

export const useApi = () => {
  const baseURL = 'https://BASE_URL.com'
  const storeUser = useStoreUser()

  return axios.create({
    baseURL,
    headers: {
      Authorization: `Bearer ${storeUser.token}`
    }
  })
}

The process now involves:

<script lang="ts" setup>
const api = useApi()

const { data } = await api({
    method: 'get',
    url: '/auth/login'
})
</script>

Answer 4

When working with nuxtjs3, I find it beneficial to utilize a composable as it offers flexibility and can be easily imported throughout the application.

composables/useApi.ts

import axios from 'axios'

export const useApi = () => {
  const baseURL = 'https://BASE_URL.com'
  const storeUser = useStoreUser()

  return axios.create({
    baseURL,
    headers: {
      Authorization: `Bearer ${storeUser.token}`
    }
  })
}

The process now involves:

<script lang="ts" setup>
const api = useApi()

const { data } = await api({
    method: 'get',
    url: '/auth/login'
})
</script>

Guide on integrating the @nuxtjs/axios plugin with Nuxt3

Answer №1

Answer №2

Similar questions

What is the best way to exclude a specific key when adding JSON objects to an array?

Navigating Dynamically between tabs - A How-to Guide

Storing a token in NodeJS using JavaScript

After running javascript, Elements do not retain any values

Efficient communication in Angular: Sharing data among controllers and components

Understanding the moment when the DOM is fully rendered within a controller

Having trouble setting up react-i18n with hooks and encountering a TypeError: Cannot read property '0' of undefined?

Is it possible for .getElementByClassName to identify Ajax.GET elements?

Error message: ReactJs encountered a TypeError stating that categories.map is not a function

A comparison between Buffer.byteLength and file size

Prevent the browser back button from being used in a web application that requires CLIENT_CERT authentication

Display the HTML element prior to initiating the synchronous AJAX request

Tips for preventing Chrome from masking the background image and color on an autofill input

The db.all method does not provide an array as its return variable

What is the reason behind the blocking of Ajax GET requests without CORS, while JSONP requests are permitted?

Implementing complex routing with Express.js on top of Node.js

Using Angular NgRx - triggering an action from an effect once certain actions yield a result

Issues encountered with NodeJS servers experiencing unresponsive posts

What are the best practices for implementing serialization in NestJS?

Comparison of getComputedStyle() and cssText functionality between Internet Explorer and Firefox