axios is not defined in Vue js 2

Question

strong text I'm new in laravel and vue js. I'm trying to learn Vue js.In a Laravel+Vue project, i tried to use axios to post an API response. axios is not defined in Vue js 2. How to solve this problem.When i add some data. data didn't show and also didn't work my delete function. and why I face this problem? thanks for advance

app.js

import Vue from 'vue';

import App from './vue/app';



import { library } from '@fortawesome/fontawesome-svg-core'
import { faPlusSquare, faTrash } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faPlusSquare, faTrash)

Vue.component('font-awesome-icon', FontAwesomeIcon)


const app = new Vue ({
    el: '#app',
    components: { App }
});

addItemForm

<template>
  <div class="addItem">
    <input type="text" v-model="item.name" />
    <font-awesome-icon
      icon="plus-square"
      @click="addItem()"
      :class="[item.name ? 'active' : 'inactive', 'plus']"
    />
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      item: {
        name: "",
      },
    };
  },
  methods: {
    addItem() {
      if (this.item.name == "") {
        return;
      }
      axios
        .post("api/item/store", {
          item: this.item,
        })
        .then((response) => {
          if (response.status == 201) {
            this.item.name = "";
            this.$emit("reloadlist");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.addItem {
  display: flex;
  justify-content: center;
  align-content: center;
}

input {
  background: rgb(236, 164, 138);
  border: 0px;
  outline: none;
  padding: 5px;
  margin-right: 10px;
  width: 100%;
}
.plus {
  font-size: 20px;
}

.active {
  color: rgb(34, 211, 57);
}

.inactive {
  color: rgb(63, 66, 63);
}
</style>

app.vue

<template>

  <div class="todoListContainer">
    <div class="heading">
      <h2 id="title">Todo List</h2>
      <add-item-form v-on:reloadlist="getList()" />
    </div>
    <list-view :items="items"
    v-on:reloadlist="getList()" />
  </div>
</template>

<script>

import addItemForm from "./addItemForm.vue";
import listView from "./listView.vue";

export default {
  components: {
    addItemForm,
    listView,
  },
  data: function () {
    return {
      items: [],
    };
  },
  methods: {
    getList() {
      axios
        .post('api/items')
        .then((response) => {
          this.items = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.todoListContainer {
  width: 350px;
  margin: auto;
}

.heading {
  background: wheat;
  padding: 10px;
}
#title {
  text-align: center;
}
</style>

Answer 1

In order to use, axios you have to import the axios. Considering you have already installed axios already in your project as it is third party library.

import axios from 'axios';

Add above line in the component, wherever you use the package.

Answer 2

First install both axios and vue-axios packages.

npm install axios vue-axios

Then in app.js file write this code:

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

// this is the default base url in laravel
axios.defaults.baseURL = 'http://127.0.0.1:8000';

// this line is written to avoid csrf error
window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
};

Then when you want to use axios just write this.axios .

Answer 3

Firstly, install axios and vue-axios

npm install axios vue-axios

Seconly, import it inside your script

<script>

import addItemForm from "./addItemForm.vue";
import listView from "./listView.vue";

import axios from 'axios';  // <-- add this line

export default {
  components: {
    addItemForm,
    listView,
  },
  data: function () {
    return {
      items: [],
    };
  },
  methods: {
    getList() {
      axios
        .post('api/items')
        .then((response) => {
          this.items = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  created() {
    this.getList();
  },
};
</script>

Answer 4

hi you must install Axios first

npm install axios vue-axios