Error Message: Unexpected Type Error with axios in Vue 3

Trying to implement axios in my Vue3 project for fetching APIs. Here is the code snippet from 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 have included axios by importing it as shown below:

import axios from 'axios'
import VueAxios from 'vue-axios'
...
const app = createApp(App)
app.use(VueAxios, axios)

Upon clicking the button to initiate the request, I encounter the following error consistently:

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 switching browsers without success. Any help or suggestions are greatly appreciated.

Answer №1

Do you require VueAxios? Essentially, all you have to do is include the following in your main file:

import axios from 'axios'
app.config.globalProperties.axios = axios;

Afterwards, it will be accessible on all components globally:

methods: {
makeRequest() {
  console.log('Making request...')
  this.axios.get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
         console.log("test");
      });

You are not obligated to add axios globally to your app, you can also add it exclusively to the components that require 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");
      });
    }
  }
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with the functionality of expanding rows in Kendo grid

I am facing an issue with my Kendo grid that is populated from a SQL database. The expand feature works perfectly and displays a different Kendo grid in the expanded row when the program is first launched. However, if I perform a new search and get differe ...

`On mobile devices, the Bootstrap button no longer displays focus changes once clicked.`

When clicking a primary bootstrap button, it changes its background color to blue on mobile devices. For example, the first button appears normal and the second one turns blue after clicking. However, this background effect disappears when clicking anywhe ...

I am encountering a problem with my Vuex getter where it is sending an Array with a length of 0, but when expanded in the console,

Currently, I'm utilizing Vuex to interact with a Django API in order to fetch count data. state: { DailyCycleDate: [] }, getters: { DailyCycleDate : state => { console.log('Getter') console.log('Length of Array: &apo ...

Interactive table created with DataTables that automatically updates the dynamic JSON data source whenever changes are made to the table

Using the Datatables plugin, I am dynamically populating a table with HTML rendered from a JSON array. However, I need the table to update the model (datasource) stored client-side whenever an edit is made. When navigating to a new page on the table, it s ...

Ways to update div content following a successful AJAX call

I have a form that utilizes AJAX requests, and when the input fields are not filled correctly and the submit button is clicked, error messages are displayed without refreshing the page. While this functionality works, a problem arises when the form is subm ...

Click to execute instantly without encountering any errors

I'm working with a modal in React JS and I want to trigger a function when the modal opens. I currently have a button function that is functioning correctly using the following code: <button onClick={functionExample("stringParam", true)} ...

The issue of infinite scroll functionality not functioning properly when using both Will Paginate and Masonry

I'm having trouble getting the Infinite Scroll feature to work on my website. I've successfully implemented Masonry and Will Paginate, but for some reason, the Infinite Scroll isn't functioning as expected. I suspect that the issue lies wit ...

Observables in Knockout.js vanish after being bound

I'm encountering a peculiar issue with my Knockout script. Here is the viewModel: viewModel = { viewShown: function () { if (params.id !== undefined) timer = setInterval(loadVorgangsdetails, 100); else { $( ...

What is the best way to restrict datalist options while preserving the "value" functionality?

After finding a creative solution by @Olli on Limit total entries displayed by datalist, I successfully managed to restrict the number of suggestions presented by a datalist. The issue arises from the fact that this solution only covers searching through ...

The functionality of AngularJS ng-model seems to be disrupted when it is set within a directive

Is it possible to automatically generate the ng-model of an input based on the name of the input itself? This requirement arises from using Html.TextBoxFor in MVC, which creates the necessary name for binding the input to the server-side model. To streamli ...

Closing a dropdown on outside click in NEXT.JS can be done by adding an event

Currently, I am in the process of developing an ecommerce platform that features a search input with results displayed in a dropdown. The search functionality is working as intended, but now I would like to implement a feature where the dropdown closes whe ...

Issues with the execution of Typescript decorator method

Currently, I'm enrolled in the Mosh TypeScript course and came across a problem while working on the code. I noticed that the code worked perfectly in Mosh's video tutorial but when I tried it on my own PC and in an online playground, it didn&apo ...

Is it possible to obtain the X-Y coordinates of the ray collision location in relation to the targeted face?

I have been working on determining the ray collision coordinate in relation to the targeted face... The following is my code snippet: var fMouseX = (iX / oCanvas.width) * 2 - 1; var fMouseY = -(iY / oCanvas.height) * 2 + 1; //Utilizing OrthographicCamer ...

User input determines the path of Iron Route in Meteor

A requirement is to execute a function that prompts the user for input and then navigates to that specified value. For instance, if the inserted value is: https://www.youtube.com/watch?v=_ZiN_NqT-Us The intended destination URL should be: download?u ...

Initiate an Ajax request from a hyperlink

Is it possible to trigger an Ajax request from a hyperlink? I am interested in updating the inner html of a div element upon clicking on a hyperlink through JavaScript. ...

Troubleshooting ng-repeat in AngularJS: Multi checkbox filter malfunction

My AngularJS app has multiple age range filters implemented, but one of them is not functioning correctly and I can't figure out why. You can view a functional example here. The various filters are defined as follows: .filter('five', func ...

What steps should I follow to ensure that the message "Read It" is logged to the console before "Ex It"?

app.get('/', async (req, res) => { await fs.readFile('./views/website/index.html', 'utf8', (err, d) => { data = d console.log("Successfully read the file") // console.log(data) ...

Save documents in Firebase storage

Currently in the process of developing a web application using Firebase and Angularjs as my frontend tools. Curious to know whether it's feasible to store various file types within the Firebase DB. Could you shed some light on any potential limitatio ...

Steps to deactivate a ladda button

I'm currently utilizing Ladda UI for bootstrap in my project. My goal is to disable a button using jQuery after the user clicks on it. Despite attempting to use ajax OnComplete / OnSuccess / OnBegin, I've had no luck - the button remains enable ...

What approach does JavaScript take when encountering a value that is undefined?

Having recently delved into JavaScript and exploring a book, I came across an interesting example in the recursive chapter: function findSolution(target) { function find(current, history) { if (current == target) return history; else if (c ...