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=""></script>
<script src=""></script>
  const app = new Vue({
    data: () => ({result: null}),
    template: `
      <button @click="makeRequest">Make Request</button>
      <div>Result is: {{result}}</div>
    methods: {
      async makeRequest() {
        const res = await axios.put('', {hello:'world'});
        this.result = res.status;

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!

More Vue Tutorials