[Vuejs]-Vue – Axios is not defined

You still need to import it in the second file. You scrip tag should look like this:

<script>
import axios from 'axios';
axios.get("/contadores").then(response => console.log(response));
</script>

You have not imported axios in your file.

To solve this issue either import it in your file where you want to use it as below

import axios from 'axios';

OR

If you don’t want to import it in each component where you use it, you can add it to the Vue prototype:

window.axios = require('axios');

//... configure axios...

Vue.prototype.$http = window.axios;

Then in any component you can use

this.$http.post('event/store', {
    'name': this.name,
})

An interesting approach that I use in my projects, is to use the library vue-axios, which is very simple to be installed. In case you need to install the dependencies in your project through the commands npm install --save axios vue-axios and then import it into the main.js file or the main file of your application:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use (VueAxios, axios)

The use of axios in the component will be through this.axios.get(`${url}`). Another approach already exposed by friends here at StackOverflow is to import the axios directly into the component you want to use:

<template>
<div>
...
</div>
</template>
<script>
import axios from 'axios';

export default {
   name: 'ComponentName',
   methods: {
      async getAsyncApi() {
         try {
            const result = await axios.get(`${url}`);
        } catch(e) {
            window.console.error('Error! ', e.message);
        }
      },
      getApi() {
         let result;
         axios.get(`${url}`).then((r) => {
           result = r;
         }).catch(e => window.console.error('Error! ', e.message));
      },
   },
};
</script>

I fix the error with

export default {
  mounted() {
    axios
      .get("ENDPOINT")
      .then(response => console.log(response));
  }
};