CODEWITHSUNDEEP
javascriptvue.jsaxiosnuxt.jsnuxt3.js
Azizxon Zufarov
Azizxon Zufarov

Reputation: 127

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

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.

Upvotes: 5

Views: 39746

Answers (2)

vghernandz
vghernandz

Reputation: 11

With nuxtjs3 I prefer to use a composable, it is flexible and self-imported throughout the app.

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}`
    }
  })
}

Now what I do is simply

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

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

Upvotes: 1

kissu
kissu

Reputation: 46604

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)

enter image description here

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!

Upvotes: 10

Related Questions