Listing Appointments using Vue 3, Axios and Laravel | Part 24

In this tutorial, we will continue building our appointment listing app using Vue 3, Axios and Laravel. In the previous parts of this series, we have set up our Vue 3 project, created the necessary components, and set up our Laravel backend with API endpoints for fetching and creating appointments.

Fetching Appointments using Axios

Now that we have our Laravel backend set up with the necessary API endpoints, we can use Axios to fetch the appointments from the server and display them in our Vue app. We’ll start by installing Axios if we haven’t already done so:

npm install axios
        

Once Axios is installed, we can use it to make a GET request to fetch the appointments from the server:

import axios from 'axios';

export default {
    data() {
        return {
            appointments: []
        }
    },
    mounted() {
        axios.get('/api/appointments')
            .then(response => {
                this.appointments = response.data;
            })
            .catch(error => {
                console.error(error);
            });
    }
}
        

Displaying Appointments in Vue

Now that we have fetched the appointments from the server, we can display them in our Vue app using the appointments data property:

  

    
Appointments
    

      

        {{ appointment.title }}
      
    
  



export default {
  data() {
    return {
      appointments: []
    };
  },
  mounted() {
    // Fetch appointments using Axios
  }
};

        

Conclusion

In this part of the series, we have learned how to fetch appointments from the server using Axios and display them in our Vue app. In the next part, we will look into creating new appointments and updating existing appointments using Axios and Laravel.