How to Use Vue with Axios to Make a PUT Request

Jun 17, 2021

With a few lines of code, you can easily make an axios.put() request with Vue:

<div id = "content"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>
  const app = new Vue({
    data: () => ({result: null}),
    template: `
    <div>
      <button @click="makeRequest">Make Request</button>
      <div>Result is: {{result}}</div>
    </div>
    `,
    methods: {
      async makeRequest() {
        const res = await axios.put('https://httpbin.org/put', {hello:'world'});
        this.result = res.status;
      }
    }
  });
  app.$mount("#content");
</script>

You should use axios.put() calls in Vue methods, or in a watcher. Do not make HTTP requests in computed properties!


Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Vue Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!