I am trying to use axios in my Vue3 app to consume APIs. This is the script of my component:
export default {
name: "Step2",
data() {
return {
loading: true;
};
},
mounted() {
this.loading = false;
},
methods: {
makeRequest() {
console.log('Making request...')
this.axios.get('https://jsonplaceholder.typicode.com/users').then((response) => {
console.log("test");
});
}
}
};
I imported axios like so:
import axios from 'axios'
import VueAxios from 'vue-axios'
...
const app = createApp(App)
app.use(VueAxios, axios)
When I press the button to make the request, I always get the following error:
Uncaught TypeError: can't convert undefined to object
mergeConfig axios.js:1308
request axios.js:1431
method axios.js:1521
wrap axios.js:7
makeRequest Step2.vue:77
0 Step2.vue:28
...
I have tried using different browsers but had no luck. I appreciate every suggestion.
Do you need VueAxios? Basically all you need to do is in your main:
import axios from 'axios'
app.config.globalProperties.axios = axios;
And then it's available on the components globally:
methods: {
makeRequest() {
console.log('Making request...')
this.axios.get('https://jsonplaceholder.typicode.com/users')
.then((response) => {
console.log("test");
});
You don't have to add axios globally to your app, you can also add it only to the components that use it:
import axios from 'axios'
export default {
name: "Step2",
data() {
return {
loading: true;
};
},
mounted() {
this.loading = false;
},
methods: {
makeRequest() {
console.log('Making request...')
axios.get('https://jsonplaceholder.typicode.com/users').then((response) => {
console.log("test");
});
}
}
};