Vue.js 2 Design Patterns and Best Practices

Getting data from an API

Create a new file under src/utils named api.js. This will be used to create a base instance of Axios, which we can then perform HTTP requests on:

import axios from 'axios';export const API = axios.create({ baseURL: `https://jsonplaceholder.typicode.com/`})

We can then use the beforeRouteEnter Navigation Guard to get user data whenever someone navigates to the '/' route:

<template>  <ul>    <li v-for="user in users" :key="user.id">      {{user.name}}    </li>  </ul> </template><script>import { API } from '../../utils/api';export default {  data() {    return {      users: [],    };  },  beforeRouteEnter(to, from, next) {    API.get(`users`)      .then(response => next(vm => (vm.users = response.data)))      .catch(error => next(error));  },};</script>

We ...