Vue.js 2 Design Patterns and Best Practices

HTTP GET

The first thing we need to do is import Axios into our App.vue component. We can also set a ROOT_URL in this instance as we'll only be looking for the /courses endpoint:

<script>import axios from 'axios'export default {  data() {    return {      ROOT_URL: 'http://localhost:3000/courses',      courses: []    }  }}</script>

This then gives us the ability to hook into a lifecycle hook such as created() and call a method that requests the courses from our API:

export default {  data() {    return {      ROOT_URL: 'http://localhost:3000/courses',      courses: []    }  },  created() {    this.getCourseList();  },  methods: {    getCourseList() {      axios        .get(this.ROOT_URL)        .then(response => {          this.courses = response.data;        })        .catch(error => console.log(error));    }  }}

What's happening ...