Cacher is the code snippet organizer for pro developers

<template>
  <div id="app">
    <transition appear mode="out-in" name="fade">

      <Loader v-if="loading"></Loader>

      <ul v-else>
        <li v-for="user in this.users" :key="user.name.last">
          <img :src="user.picture.large">
          <div>
            <h5>{{ user.name.first }}<b> {{ user.name.last }}</b></h5>
            {{ user.email }} <br>
          </div>
        </li>
      </ul>

    </transition>
  </div>
</template>

<script>
import Axios from 'axios'

export default {
  name: 'App',
  components: {Loader},
  data () {
    return {
      users: [],
      loading: true
    }
  },
  mounted () {
    this.fetchUsers()
  },
  methods: {
    fetchUsers () {
      Axios.get('https://randomuser.me/api').then(reponse => {
        this.users.push(reponse.data.results[0])
        this.loading = false
      })
    }
  },
  destroyed () {
    console.log('Component destroyed')
  }
}
</script>

<style>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave {
    opacity: 0;
  }
</style>