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

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

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

Transferring data from AJAX to PHP

Storing chosen choices from various select lists with similar class name in JavaScript

NodeJS is facing a severe challenge in properly rendering HTML and its accompanying CSS code, causing a major

How to attach input to function invocation in Angular 2

Calculating and displaying the output on an HTML page: A step-by-step guide

What is the best way to hide or eliminate spinners/arrows in react-select?

The background color of absolute divs fails to extend across the entire screen

In order to preserve the data inputted by the user within a file

Guide to integrating a menu in Vue.js

What is the best way to retain selection while clicking on another item using jQuery?

Uniting the client-side jQuery and server-side Express for enhanced functionality

Verify the accuracy of quiz responses with PHP and AJAX

Guide for sending token through Authorization in Laravel 8 API

problem with passing the identification number into the function

How can you show the default calendar for a specific month and year in a Vue3 datepicker?

Within the materia-ui table, I am facing an issue where clicking the button to expand a row results in all rows expanding. I am seeking a solution to ensure only the selected row expands

Using vue-router within a pinia store: a step-by-step guide

Tips for effectively managing dynamic xpaths

cracking reCAPTCHA without needing to click a button or submit a form (utilizing callback functions)

The call stack in mongodb has surpassed its maximum size limit